// Component: Accordion

@use '00-config' as *;

$accordion-item-border-color: gesso-grayscale(gray-2) !default;
$accordion-item-icon-color: gesso-color(ui, generic, accent) !default;
$accordion-item-icon-size: 20px !default;
$accordion-item-icon-weight: 2px !default;

// .c-accordion {}

.c-accordion-item {
  border-block-end: solid 1px $accordion-item-border-color;
}

.c-accordion-item__heading {
  font-weight: gesso-font-weight(bold);
  margin: 0;
}

.c-accordion-item__toggle {
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-weight: inherit;
  justify-content: space-between;
  line-height: inherit;
  padding-block: rem(gesso-spacing(2));
  padding-inline: rem(gesso-spacing(2)) rem(gesso-spacing(8));
  pointer-events: none;
  position: relative;
  text-align: start;
  text-decoration: none;
  transition: all gesso-duration(short) gesso-easing(ease-out);
  width: 100%;

  &:hover,
  &:focus,
  &:active {
    color: inherit;
  }

  // Allow pointer events if accordion is processed.
  [accordion-processed] & {
    pointer-events: visible;
  }
}

.c-accordion-item__title {
  flex-basis: 100%;
}

.c-accordion-item__icon {
  display: none;
  height: $accordion-item-icon-size;
  inset-block-start: 50%;
  inset-inline-end: rem(gesso-spacing(3));
  position: absolute;
  transform: translateY(-50%);
  width: $accordion-item-icon-size;

  // Only show icon if accordion js is processed.
  [accordion-processed] & {
    display: block;
  }

  &::before,
  &::after {
    background-color: $accordion-item-icon-color;
    content: '';
    display: block;
    height: $accordion-item-icon-weight;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition-duration: gesso-duration(short);
    transition-property: transform;
    transition-timing-function: gesso-easing(ease-out);
    width: 100%;
  }

  &::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  [aria-expanded='true'] & {
    &::after {
      transform: translate(-50%, -50%) rotate(0deg);
    }
  }
}

.c-accordion-item__drawer {
  background: gesso-grayscale(white);
}

.c-accordion-item__drawer-inner {
  padding: rem(gesso-spacing(2));
  padding-block-start: 0;
  padding-inline-end: rem(gesso-spacing(8));

  > :last-child {
    margin-block-end: 0;
  }
}
