@import "../../settings/all";
@import "../../tools/all";
@import "../../helpers/all";

@include govuk-exports("govuk/component/warning-text") {

  .govuk-warning-text {
    @include govuk-font($size: 19);
    @include govuk-text-colour;

    position: relative;
    @include govuk-responsive-margin(6, "bottom");
    padding: govuk-spacing(2) 0;
  }

  .govuk-warning-text__assistive {
    @include govuk-visually-hidden;
  }

  .govuk-warning-text__icon {
    @include govuk-font($size: false, $weight: bold);

    display: inline-block;

    position: absolute;
    top: 50%;
    left: 0;

    min-width: 32px;
    min-height: 29px;
    margin-top: -20px; // Half the height of the circle (adjusted for NTA)
    padding-top: 3px;

    // 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 govuk-colour("black");
    border-radius: 50%;

    color: govuk-colour("white");
    background: govuk-colour("black");

    font-size: 1.6em;
    line-height: 29px;

    text-align: center;

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

  .govuk-warning-text__text {
    display: block;
    padding-left: 50px;
  }
}