@use '../common/mixins';
@use '../common/variables';

// —————————————————————————————————————————————————————————————————
// elements
// size
// transparent
// active
// disabled
// —————————————————————————————————————————————————————————————————

// —————————————————————————————————————————————————————————————————
// elements
// —————————————————————————————————————————————————————————————————

.accordion {
  width: 100%;

  &_item {
    position: relative;
    background-color: variables.$hover;
    width: 100%;
  }

  &_control,
  &_content {
    transition: padding variables.$transition-md;
    will-change: padding;
  }

  &_control {
    width: 100%;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;

    &:focus { outline: none; }
    &:focus-within { outline: revert; }

    &:after {
      transition: transform variables.$transition-md;
      will-change: transform;
      position: absolute;
      height: 1rem;
      width: 1rem;
      transform-origin: center 60%;
      pointer-events: none;
    }
  }

  &_header {
    flex: 1;
  }

  &_icon {
    width: 1em;
    height: 1em;
  }

  &_content {
    max-height: 0;
    overflow: hidden;
    transition: max-height variables.$transition-md;
    will-change: max-height;
  }
}

// —————————————————————————————————————————————————————————————————
// size
// —————————————————————————————————————————————————————————————————

@mixin accordion-size($proportion, $size) {

  .accordion {

    &_item {
      border-radius: calc($size*2/3);

      &:not(:last-child) { margin-block-end: calc($size/3); }
      &-active { padding-block-end: $size; }
    }
    
    &_control {
      padding: $size $size*1.5;

      &:after {
        inset-block-start: $size;
        inset-inline-end: $size*1.25;
      }
    }

    &_header {

      @if $proportion == sm { margin-block-end: -1px; }
      @if $proportion == lg { margin: -1px 0 -2px 0; }
    }

    &_content {
      padding: 0 $size*1.5;
      overflow: hidden;
    }
  }

  &.accordion-transparent .accordion_item-active:not(:first-child) {
    margin-block-start: calc($size/3);
  }
}

.accordion {

  @include accordion-size(md, .5rem);
  &-sm { @include accordion-size(sm, .25rem); }
  &-lg { @include accordion-size(lg, 1rem); }
}

// —————————————————————————————————————————————————————————————————
// transparent
// —————————————————————————————————————————————————————————————————

.accordion-transparent {

  .accordion_item {
    transition: background-color variables.$transition-md, margin variables.$transition-md;
    will-change: background-color, margin;
    background-color: transparent;

    @include mixins.hover { background-color: variables.$hover; }
    &-active { background-color: variables.$hover; }
    
    &:not(:last-child):not(.accordion_item-active) {
      margin-block-end: 0;
    }
  }
}

// —————————————————————————————————————————————————————————————————
// active
// —————————————————————————————————————————————————————————————————

.accordion_item-active {

  .accordion_control:after {
    transform: rotate(180deg);
  }
}

// —————————————————————————————————————————————————————————————————
// disabled
// —————————————————————————————————————————————————————————————————

.accordion_item-disabled {
  opacity: 0.5;
  
  .accordion {
    
    &_control {
      cursor: not-allowed;
    }
  }
}