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

.expander {
  $item: &;

  &:first-of-type {
    border-top: 1px solid palette.$neutral500;
  }

  &__button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    cursor: pointer;
    background-color: transparent;
    border-bottom: 1px solid palette.$neutral500;
    padding: spacers.getSpacer(xs) 0;

    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
      flex-direction: row-reverse;
      justify-content: start;
      padding: spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(s) spacers.getSpacer(2xs);
    }

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

    &:focus {
      text-decoration: underline;
      outline: spacers.getSpacer(4xs) solid palette.$black;
    }

    &[aria-expanded='true'] {
      background-color: palette.$neutral100;
      border-bottom: none;
    }

    @media print {
      &--print {
        background-color: palette.$neutral100;
      }
    }

    &--2-and-lower {
      padding: spacers.getSpacer(2xs) 0;

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

  &__title {
    margin: 0;

    &--1 {
      @include fonts.title2;
    }

    &--2 {
      @include fonts.title3;
    }

    &--3 {
      @include fonts.title4;
    }

    &--4-and-lower {
      @include fonts.title5;
    }

    &--expanded {
      + #{$item}__content {
        display: block;
      }
    }

    @media print {
      &--print {
        + #{$item}__content {
          display: block;
        }
      }
    }
  }

  &__content {
    display: none;
    border-bottom: 1px solid palette.$neutral500;
    padding-top: spacers.getSpacer(m);
    padding-left: spacers.getSpacer(2xs);
    padding-bottom: spacers.getSpacer(m);

    &--1 {
      padding-top: spacers.getSpacer(xl);
    }

    &--1,
    &--2 {
      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
        padding-left: spacers.getSpacer(2xl);
      }
    }

    &--3-and-lower {
      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
        padding-left: spacers.getSpacer(xl);
      }
    }
  }

  &__icon {
    margin-left: spacers.getSpacer(s);

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

    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
      margin-left: 0;
      margin-right: spacers.getSpacer(s);
    }

    &--3-and-lower {
      @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
        margin-right: spacers.getSpacer(xs);
      }
    }
  }
}