@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/palette' as palette;
@use '../../scss/breakpoints' as breakpoints;

.notification-panel {
  $panel: &;

  display: flex;
  padding: spacers.getSpacer(2xs) spacers.getSpacer(s) spacers.getSpacer(2xs) spacers.getSpacer(2xs);
  box-shadow: 0.25rem 0.25rem 0.375rem rgb(0 0 0 / 15%);
  border-radius: 0.25rem;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    padding-left: spacers.getSpacer(s);
    padding-right: spacers.getSpacer(m);
  }

  &--compact {
    width: fit-content;
    font-size: font-settings.$font-size-xs;
    line-height: 1.25rem;
    box-shadow: none;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding-left: spacers.getSpacer(2xs);
      padding-right: spacers.getSpacer(s);
    }

    &--outline {
      border: none;
    }
  }
  #{$panel}__icon {
    margin-right: spacers.getSpacer(3xs);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      margin-right: spacers.getSpacer(2xs);
    }
  }

  &--dismissable {
    padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(m);
  }

  &--small {
    max-width: map.get(breakpoints.$grid-breakpoints, sm);
  }

  &--medium {
    max-width: map.get(breakpoints.$grid-breakpoints, md);
  }

  &--large {
    max-width: map.get(breakpoints.$grid-breakpoints, lg);
  }

  &--info {
    border: 0.125rem solid palette.$blueberry700;
    background-color: palette.$blueberry50;
  }

  &--info#{&}--compact {
    box-shadow: none;
    background-color: transparent;
  }

  &--info#{&}--compact--basic {
    border: none;
  }

  &--warn {
    border: 0.125rem solid palette.$banana800;
    background-color: palette.$banana50;
  }

  &--warn#{&}--compact {
    box-shadow: none;
    background-color: transparent;
  }

  &--warn#{&}--compact--basic {
    border: none;
  }

  &--error {
    border: 0.125rem solid palette.$cherry700;
    background-color: palette.$cherry50;
  }

  &--error#{&}--compact {
    box-shadow: none;
    background-color: transparent;
  }

  &--error#{&}--compact--basic {
    border: none;
  }

  &--success {
    border: 0.125rem solid palette.$kiwi900;
    background-color: palette.$kiwi50;
  }

  &--success#{&}--compact {
    box-shadow: none;
    background-color: transparent;
  }

  &--success#{&}--compact--basic {
    border: none;
  }

  &__close {
    order: 1;
    margin-left: auto;
    padding-left: spacers.getSpacer(3xs);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding-left: spacers.getSpacer(2xs);
    }
  }

  &__content {
    align-self: center;
  }

  &__label,
  &__children {
    font-size: font-settings.$font-size-xs;
    line-height: font-settings.$lineheight-size-xs;
    margin: 0;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      font-size: font-settings.$font-size-sm;
      line-height: 1.625rem;
    }
  }

  &__label {
    font-weight: 700;
    margin: spacers.getSpacer(2xs) 0 0;

    &--compact {
      font-size: font-settings.$font-size-xs;
      line-height: 1.25rem;
    }

    &--no-content {
      margin: 0;
    }

    &--compact,
    &--no-content {
      font-weight: 600;
    }

    &--outline {
      font-weight: 500;
    }
  }

  &__children {
    font-weight: 600;
    padding: spacers.getSpacer(3xs) 0;

    &--with-label {
      font-weight: 500;
    }

    &--expander-no-label {
      margin: spacers.getSpacer(2xs) 0 0;

      @media (max-width: map.get(breakpoints.$grid-breakpoints, lg)) {
        padding-top: 0;
      }
    }

    &--outline {
      font-weight: 500;
    }
  }

  &__icon {
    line-height: 0;
  }

  &--with-content {
    padding-bottom: spacers.getSpacer(xs);
  }
}

.fluid-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}