@use 'functions/get-var' as *;
@use 'variables' as *;

// Accordions
.accordion {
  input:checked ~,
  &[open] {
    & .accordion-header > {
      .icon:first-child {
        transform: rotate(90deg);
      }
    }

    & .accordion-body {
      max-height: 50rem;
    }
  }

  .accordion-header {
    display: block;
    // padding: $unit-1 $unit-2; // old spectre.css
    padding: get-var('unit-1') get-var('unit-2');

    .icon {
      // transition: transform 0.25s; // old spectre.css
      transition: transform calc(get('transition-duration') + 0.05s); // old spectre.css
    }
  }

  .accordion-body {
    // margin-bottom: $layout-spacing; // old spectre.css
    margin-bottom: get-var('layout-spacing', $unit: 1);
    max-height: 0;
    overflow: hidden;
    // transition: max-height 0.25s; // old spectre.css
    transition: max-height calc(get('transition-duration') + 0.05s); // old spectre.css
  }
}

// Remove default details marker in Webkit
summary.accordion-header {
  &::-webkit-details-marker {
    display: none;
  }
}