@use "config";
@use "mixins";
@use "variables";
@use "sass:color";
@use "sass:math";
@use "sass:map";

.accordion {
  $self: &;
  $accordion-primary-color: map.get(variables.$greyscale, 'base');
  $accordion-primary-background: map.get(variables.$greyscale, 'white');
  $accordion-secondary-background: map.get(variables.$greyscale, 'lighter');
  $accordion-primary-border-color: color.adjust(map.get(variables.$greyscale, 'light'), $lightness: math.percentage(config.$hue-threshold * 2));
  $accordion-secondary-border-color: color.adjust(map.get(config.$brand-colors, 'med-blue'), $lightness: math.percentage(config.$hue-threshold));
  $accordion-active-background: map.get(config.$brand-colors, 'med-blue' );
  $accordion-hover-border: map.get(config.$brand-colors, 'skyblue' );

  background-color: $accordion-primary-background;
  border: 1px solid transparent;
  border-top-color: $accordion-primary-border-color;
  color: $accordion-primary-color;
  font-size: 100%;
  transition: border-color config.$transitions;

  &:last-of-type {
    border-bottom-color: $accordion-primary-border-color;
  }

  &:not(.active):hover {
    border-color: $accordion-hover-border;

    #{$self}__header {
      background-color: $accordion-secondary-background;
    }
  }



  &.active {
    border-color: transparent;
    box-shadow: 0px 0px 0px 2px $accordion-hover-border;

    > #{$self}__header {
      background-color: $accordion-secondary-background;

      #{$self}__icon {
        @extend %rotate-180;
      }
    }
    > #{$self}__content {
      display: block;
    }
  }

  &__header {
    display: flex;
    position: relative;
    transition: background-color config.$transitions;
    z-index: 10;
  }

  &__icon {
    transition: transform config.$transitions;
  }

  &__content {

    > #{$self} {
      border: none;
      &:not(.active):hover {
        #{$self}__header {
          background-color: $accordion-primary-background;
        }
      }
      &.active {
        border: none;
        box-shadow: none;
      }
      > #{$self} {
        &__header {
        background-color: $accordion-primary-background;
        font-weight: bold;
        }
      }
    }
    border-top: none;
    display: none;
    position: relative;
    z-index: 0;
  }
}