@use "system/breakpoints";
@use "system/colors";
@use "system/typography";
@use "system/spacing";
@use "components/links/link/mixins";
@use "system/units";

.ods-alert {
  background-color: colors.$white;

  &__link {
    @extend %ods-padding-4, %ods-padding-6-breakpoint-large;

    align-items: flex-start;
    color: inherit;
    display: flex;
    font-size: inherit;
    text-decoration: none;

    &--focus,
    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &--focus,
  &:focus-visible {
    box-shadow: 0 0 0 0.125rem colors.$blue-state;
    outline-offset: 0.125rem;
    outline: 0.25rem solid colors.$purple-light;
  }

  &__illustration {
    @extend %ods-margin-right-3;

    flex: 0 0 auto;
    line-height: 0;

    img {
      width: 60px;
      height: 60px;

      @include breakpoints.large {
        width: 70px;
        height: 70px;
      }
    }
  }

  &__circle {
    border-radius: 50%;
  }

  &__main {
    flex-grow: 4;

    h2 {
      @extend %ods-margin-bottom-1;
      @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
      @extend %ods-text--weight-medium;

      display: inline-block;
    }

    p {
      @extend %ods-text--size-lima;
      @extend %ods-text--weight-light;
    }
  }

  &__status {
    @extend %ods-margin-left-4;

    align-items: flex-start;
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    line-height: 0;

    .ods-icon {
      line-height: 1em !important;

      &--size {
        @extend %ods-text--size-hotel, %ods-text--size-golf-breakpoint-medium, %ods-text--size-delta-breakpoint-large;
      }
    }
  }

  &--illustration {
    & .ods-alert__link {
      align-items: center;
      @extend %ods-padding-vertical-3, %ods-padding-horizontal-4, %ods-padding-vertical-3-breakpoint-medium, %ods-padding-horizontal-4-breakpoint-medium, %ods-padding-vertical-4-breakpoint-large, %ods-padding-horizontal-6-breakpoint-large;
    }
  }

  &--critical {
    .ods-alert__status .ods-alert__symbol {
      &::after {
        @extend %ods-margin-top-2;
        @extend %ods-margin-right-2;

        animation: alert-critical-pulse 2s infinite;
        background-color: colors.$red;
        border-radius: 50%;
        box-shadow: 0 0 0 0 rgba(colors.$red, 0.7);
        content: "";
        display: inline-block;
        height: units.unit-to-rem(3);
        width: units.unit-to-rem(3);
      }
    }
  }

  @include mixins.states {
    .ods-alert__main h2 {
      text-decoration: underline;
    }
  }
}

@keyframes alert-critical-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(colors.$red, 0.8);
  }

  80% {
    box-shadow: 0 0 0 10px rgba(colors.$red, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(colors.$red, 0);
  }
}