@use '../../global/scss/tools' as nsw;

.nsw-global-alert {
  padding: nsw.rem(24px) 0;
  background-color: var(--nsw-status-info);
  color: var(--nsw-text-light);

  .nsw-icon-button {
    position: absolute;
    top: nsw.rem(-8px);
    right: nsw.rem(4px);
    color: var(--nsw-text-light);

    &:hover {
      @include nsw.nsw-hover;
      background-color: var(--nsw-hover-light);
    }

    &:focus {
      @include nsw.nsw-focus($color: var(--nsw-text-light));
    }
  }

  &__wrapper {
    @include nsw.container;
    position: relative;
  }

  &__title {
    font-weight: var(--nsw-font-bold);
    
    @include nsw.font-size('md');
  }

  &__content {
    margin-right: nsw.rem(36px);

    a {
      @include nsw.link-light;
    }
  }

  .nsw-button {
    margin-right: 0;
  }

  &--critical {
    background-color: var(--nsw-status-error);
  }

  &--light {
    background-color: var(--nsw-status-info-bg);
    color: var(--nsw-text-dark);

    .nsw-global-alert__content a {
      @include nsw.link-dark;
    }

    .nsw-icon-button {
      color: var(--nsw-brand-dark);

      &:hover {
        background-color: var(--nsw-hover);
      }

      &:focus {
        outline-color: var(--nsw-focus);
      }
    }
  }
}