// CSS for the AXE/AXS output in debug mode
.wc_a11y {
  @include border;
  margin: $wc-gap-large;

  > a {
    margin: 0 $wc-gap-small;
  }

  // I have never seen a warning level issue in WComponents which has NOT been
  // a false negative.
  &.warning {

    border-color: $wc-clr-warning-fg;

    &::before {
      background-color: $wc-clr-warning-fg;
      content: 'A11Y: WARNING';
    }
  }

  &.severe {
    border-color: $wc-clr-error-fg;

    &::before {
      background-color: $wc-clr-error-fg;
      content: 'A11Y: SEVERE';
    }
  }

  &.warning,
  &.severe {
    &::before {
      @include border-box;
      color: $wc-clr-global-bg;
      display: block;
      font-weight: bold;
      margin-bottom: $wc-gap-normal;
      padding: $wc-gap-small;
      text-align: center;
      width: 100%;
    }
  }
}
