_index.scss

@import "../../base";

@include govuk-exports("govuk/component/warning-text") {
  .govuk-warning-text {
    @include govuk-font($size: 19);
    @include govuk-responsive-margin(6, "bottom");
    @include govuk-typography-weight-bold;
    position: relative;
    padding: govuk-spacing(2) 0;
  }

  .govuk-warning-text__icon {
    box-sizing: border-box;

    display: inline-block;

    position: absolute;
    left: 0;

    min-width: 35px;
    min-height: 35px;
    margin-top: -7px;

    @media #{govuk-from-breakpoint(tablet)} {
      margin-top: -5px;
    }

    // When a user customises their colours the background colour will often be
    // removed. Adding a border to the component keeps it's shape as a circle.
    border: 3px solid;
    border-radius: 50%;
    border-color: govuk-functional-colour(text);

    color: govuk-functional-colour(body-background);
    background: govuk-functional-colour(text);

    font-size: 30px;
    line-height: 29px;

    text-align: center;

    // Prevent the exclamation mark from being included when the warning text
    // is copied, for example.
    user-select: none;

    // Improve rendering in Windows High Contrast Mode (Edge), where a
    // readability backplate behind the exclamation mark obscures the circle
    forced-color-adjust: none;

    @media screen and (forced-colors: active) {
      border-color: windowText;
      color: windowText;
      background: transparent;
    }
  }

  .govuk-warning-text__text {
    display: block;
    padding-left: 45px;
    color: govuk-functional-colour(text);
    // While `<strong>` is styled `bold` or `bolder` by user-agents
    // this can be reset by the app's stylesheet
    font-weight: inherit;
  }
}