@use 'sass:map';
@use '../../global/scss/tools' as nsw;

.nsw-in-page-alert {
  padding: nsw.rem(16px);
  position: relative;
  border-left: solid 4px var(--nsw-brand-accent);
  background-color: var(--nsw-grey-04);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  
  @include nsw.component-spacing();

  @include nsw.breakpoint('md') {
    padding: nsw.rem(24px) nsw.rem(24px) nsw.rem(24px) nsw.rem(16px);
  }
      
  .nsw-section--invert & {    
    color: var(--nsw-text-dark);

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

  &__icon {
    font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 30));
    margin-right: nsw.rem(16px);
    margin-top: nsw.rem(-2px);
  }

  &__content {
    text-wrap: pretty;
  }

  @each $color, $variant in nsw.$nsw-in-page-alerts {
    &--#{"" + $color} {
      background-color: map.get($variant, background);
      border-color: map.get($variant, border);

      .nsw-in-page-alert__icon {
        color: map.get($variant, fill);
      }
    }
  }

  &--compact {
    padding: nsw.rem(8px);
    border: 0;

    .nsw-in-page-alert__icon {
      font-size: nsw.rem(map.get(nsw.$nsw-icon-sizes, 20));
      margin-right: nsw.rem(8px);
      margin-top: 0;
    }
  }
}