@use "./site-config";
@use "./colors";
@use "./typography";
@use "./icon-embed";
@use "s360-scss-toolkit";

%accordion {
  summary {
    --summary--font-size: var(--accordion--summary--font-size);
    --summary--font-weight: var(--accordion--summary--font-weight);
    --summary--margin: var(--accordion--summary--margin, 0.5em 0 0 0);
    --summary--margin--open: var(--accordion--summary--margin--open, 0.5em 0 0.75em 0);
    --summary--display: var(--accordion--summary--display);

    &::before {
      --icon-embed--margin-inline: 0 0.5em;
      --icon-embed--bg-color: '';
      --icon-embed--mask-image: '';
      @extend %icon-embed;

      transition: rotate 200ms ease-in-out;
      rotate: var(--accordion--summary--rotate, 0);
    }
  }

  &[open] {
    > summary {
      --accordion--summary--rotate: 0;
    }
  }
}
