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

%accordion {
  summary {
    --summary--color: #{ colors.$black };
    --summary--font-size: #{ s360-scss-toolkit.font-size-ms(0) };
    --summary--font-weight: #{ typography.$font-weight-bold };
    --summary--margin: 0.5em 0 0 0;
    --summary--margin--open: 0.5em 0 0.75em 0;

    padding-left: calc(var(--summary--font-size) * 1.5);

    &::before,
    &::after {
      --icon-embed--mask-image: '';
      @extend %icon-embed;

      position: absolute;
      left: 0;
      top: 0;
      transition: rotate 200ms ease-in-out;
    }

    &::after {
      rotate: var(--summary--after--rotate, -90deg);
    }
  }

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