/* stylelint-disable no-descending-specificity */
@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../Button/styles.module' as button;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

.expander {
  position: initial;
  width: 100%;

  &:focus-within {
    z-index: 1;
  }

  @media print {
    border: 1px solid palette.$black;
  }

  &__icon {
    display: flex;
    align-items: center;

    &--left {
      margin-right: spacers.getSpacer(2xs);
    }

    &--right {
      margin-left: auto;
      padding-left: spacers.getSpacer(2xs);
    }
  }

  &__button {
    position: relative;
    padding-right: spacers.getSpacer(s);
    text-align: left;

    &--expanded {
      @include button.outline-borderless-hover;
    }
  }

  &__button &__button__text {
    @include button.outline-borderless-text-hover;
  }

  &__trigger {
    $trigger: &;

    position: relative;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    font-size: font-settings.$font-size-sm;
    line-height: font-settings.$lineheight-size-sm;
    font-weight: 600;
    text-align: left;

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

    &--large {
      width: 100%;
      padding: spacers.getSpacer(xs) spacers.getSpacer(2xs) spacers.getSpacer(xs) spacers.getSpacer(s);
      cursor: pointer;

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

    &--icon {
      padding-left: spacers.getSpacer(2xs);

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

    $colors: 'neutral', 'blueberry', 'cherry', 'kiwi', 'banana', 'plum';

    @each $color in $colors {
      &--#{$color} {
        background-color: map.get(palette.$palette-map, #{$color}50);

        &:hover {
          background-color: map.get(palette.$palette-map, #{$color}100);
        }

        &:focus {
          box-shadow:
            0 0 0 1.5px palette.$neutral600,
            inset 0 0 0 1.5px palette.$neutral600;
        }
        &#{$trigger}--expanded {
          background-color: map.get(palette.$palette-map, #{$color}100);

          &:hover {
            background-color: map.get(palette.$palette-map, #{$color}200);
          }
        }
      }
    }

    // Hvit bakgrunn har egne regler for bakgrunnsfarge, hover og fokus
    &--white {
      background-color: palette.$white;

      &:hover {
        background-color: palette.$neutral100;
      }

      &:focus {
        box-shadow:
          0 0 0 1.5px palette.$neutral600,
          inset 0 0 0 1.5px palette.$neutral600;
      }
      &#{$trigger}--expanded {
        box-shadow: inset 0 0 0 6px palette.$neutral100;

        &:focus {
          box-shadow:
            0 0 0 1.5px palette.$neutral600,
            inset 0 0 0 1.5px palette.$neutral600,
            inset 0 0 0 6px palette.$neutral100;
        }
      }
    }
  }

  &__button-container {
    &--sticky {
      background-color: palette.$white;
    }
  }

  &__button-container,
  &__trigger {
    &--sticky {
      position: sticky;
      top: 0;
    }
  }

  &__content {
    $content: &;

    display: none;
    width: 100%;

    @media print {
      display: block;
    }

    &--expanded {
      display: block;
    }

    &--small {
      margin-top: spacers.getSpacer(s);
    }
    &--small#{&}--sticky {
      margin-top: 1.25rem;
    }

    &--nested-line {
      &--outer {
        padding-left: 0;

        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
          padding-left: calc(38px / 2 - 1px); // Halvparten av chevron-ikonets bredde minus halve bredden på border
        }
      }

      &--inner {
        padding-left: spacers.getSpacer(s);
        border-left: solid 3px palette.$neutral200;

        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
          padding-left: calc(
            38px / 2 + 12px - 2px
          ); // Halvparten av chevron-ikonets bredde, pluss ikonets margin-right på tablet, minus bredden på border
        }
      }
    }

    &--large {
      padding: spacers.getSpacer(s) spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(s);

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        padding: spacers.getSpacer(m) spacers.getSpacer(l) spacers.getSpacer(xl);
      }
      &#{$content}--icon {
        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
          padding-left: 70px;
        }
      }
    }

    &--neutral {
      background-color: palette.$neutral50;
    }

    &--blueberry {
      background-color: palette.$blueberry50;
    }

    &--cherry {
      background-color: palette.$cherry50;
    }

    &--kiwi {
      background-color: palette.$kiwi50;
    }

    &--banana {
      background-color: palette.$banana50;
    }

    &--plum {
      background-color: palette.$plum50;
    }

    &--white {
      background-color: palette.$white;
    }
  }
}