@use "../_layout/mixins";

%accordion-ladder {
  border-block-start: 1px solid var(--neutral);
  margin-block-start: 0.7em;
  padding-block-start: 0.7em;
}
.accordion--ladder {
  & + & {
    @extend %accordion-ladder;
  }
}
.accordionLadder {
  .accordion + .accordion {
    @extend %accordion-ladder;
  }
}
.accordion__handle {
  cursor: pointer;
  color: var(--color);

  & > * {
    display: inline;
  }
}
.accordion__handle--link {
  @include mixins.blockLink($underline: false);

  &:hover {
    text-decoration: none;
  }
}
.accordion__body {
  margin-block: var(--accordionBodyBlockSpacing, 0.7em);
}

.accordionInputs {
  &[open] {
    .accordionInputs__handle {
      background-color: var(--blue);
      color: var(--white);
      &:after {
        --markerColor: var(--white);
        transform: rotate(180deg);
      }
    }
  }
}
.accordionInputs__handle {
  box-sizing: border-box;
  padding: 0.1em var(--accordionInputsPadding, 1em);
  width: 100%;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  white-space: pre;
  align-items: center;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
  min-height: 29px;

  &::-webkit-details-marker {
    display: none;
  }

  &:after {
    $mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill:' viewBox='0 0 292.4 292.4'%3E%3Cpath d='M134.84,230.22,4.71,100.09a16.07,16.07,0,0,1,0-22.73L19.88,62.18a16.08,16.08,0,0,1,22.7,0L146.2,165.29,249.82,62.16a16.08,16.08,0,0,1,22.7,0l15.17,15.18a16.07,16.07,0,0,1,0,22.73L157.56,230.22a16.07,16.07,0,0,1-22.72,0Z'/%3E%3C/svg%3E");
    content: "";
    background-color: var(--markerColor, var(--type));
    -webkit-mask-image: $mask;
    mask-image: $mask;
    -webkit-mask-position-y: center;
    mask-position-y: center;
    width: 0.75em;
    height: 0.75em;
    display: block;
  }

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background-color: var(--blue);
      color: var(--white);

      &:after {
        --markerColor: var(--white);
      }
    }
  }
}
.accordionInputs__body {
  margin-inline: var(--accordionInputsPadding, 1em);
  box-sizing: border-box;
}