@use "design";
@use "m";

// This is all direct descenders because accordions can be inside of other accordions

$small-v-padding: 15px;
$small-h-padding: 15px;

.accordion {
  border-bottom: 1px solid design.$card-border-color;

  > .accordionEntry {
    @at-root {
      .smallAccordion#{&},
      .mediumAccordion#{&} {
        &.isOpen {
          > .accordionToggle span {
            color: design.$text-grey;
          }
        }
      }
    }

    @at-root .smallAccordion#{&} {
      @include design.font-small;
    }

    // Flip the chevron around
    &.isOpen > .accordionToggle > svg {
      transform: rotate(270deg);
    }

    &.isOpen.debug {
      outline: 2px solid design.$purple-60;
      box-shadow: 0 0 10px design.$purple-90;
    }

    > .accordionToggle {
      position: relative;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      border-top: 1px solid design.$card-border-color;

      .accordionTitle {
        margin-right: auto;
      }

      @at-root {
        .smallAccordion#{&},
        .mediumAccordion#{&} {
          padding: $small-v-padding $small-h-padding;
        }
      }

      @at-root .largeAccordion#{&} {
        font-size: 1.1rem;
        padding: design.$card-h-padding;

        .accordionTitle {
          font-size: 19px;
        }

        > svg {
          width: 12px;
        }
      }

      cursor: pointer;

      @include m.shadeActive;

      &:focus-visible {
        // Make sure focus ring is above the other elements
        z-index: 1;
      }

      span {
        transition: color 250ms;
      }

      > svg {
        flex-shrink: 0;
        transform: rotate(90deg);
        transition: transform 100ms;
        margin-left: 20px;
        height: auto;
      }
    }

    > .accordionBody {
      @at-root {
        .smallAccordion#{&},
        .mediumAccordion#{&} {
          padding: 3px $small-h-padding $small-v-padding $small-h-padding;
        }
      }

      @at-root .largeAccordion#{&} {
        @include m.handheld {
          padding-top: 12px;
          padding-bottom: 12px;
        }

        @include m.desktop {
          padding: 12px design.$card-h-padding design.$card-h-padding design.$card-h-padding;
        }
      }
    }
  }
}