@use "functions" as *;
@use "mixins/border-radius" as *;
@use "mixins/transition" as *;
@use "mixins/focus-ring" as *;
@use "mixins/tokens" as *;

$accordion-tokens: () !default;

// scss-docs-start accordion-tokens
// stylelint-disable-next-line scss/dollar-variable-default
$accordion-tokens: defaults(
  (
    --accordion-padding-x: 1.25rem,
    --accordion-padding-y: 1rem,
    --accordion-color: var(--fg-body),
    --accordion-bg: var(--bg-body),
    --accordion-transition-property: "color, background-color, border-radius",
    --accordion-transition-timing: ".15s ease-in-out",
    --accordion-transition: var(--accordion-transition-property) var(--accordion-timing),
    --accordion-border-color: var(--border-color),
    --accordion-border-width: var(--border-width),
    --accordion-border-radius: var(--accordion-radius, var(--border-radius-lg)),
    --accordion-btn-color: var(--fg-2),
    --accordion-btn-bg: var(--bg-body),
    --accordion-btn-icon-width: 1rem,
    --accordion-btn-icon-transform: rotate(-180deg),
    --accordion-btn-icon-transition: transform .2s ease-in-out,
    --accordion-active-color: var(--fg),
    --accordion-active-bg: var(--bg-2),
  ),
  $accordion-tokens
);
// scss-docs-end accordion-tokens

@layer components {
  .accordion {
    @include tokens($accordion-tokens);
  }

  .accordion-header {
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--accordion-btn-padding-y, var(--accordion-padding-y)) var(--accordion-btn-padding-x, var(--accordion-padding-x));
    font-size: var(--accordion-font-size, var(--font-size-base));
    color: var(--accordion-btn-color);
    text-align: start;
    list-style: none; // Remove default marker
    cursor: pointer;
    background-color: var(--accordion-btn-bg);
    @include transition(var(--accordion-transition));

    .accordion-icon {
      flex-shrink: 0;
      width: var(--accordion-btn-icon-width);
      height: var(--accordion-btn-icon-width);
      margin-inline-start: auto;
      color: currentcolor;
      @include transition(var(--accordion-btn-icon-transition));
    }

    &:hover {
      z-index: 2;
    }

    &:focus-visible {
      position: relative;
      z-index: 3;
      @include focus-ring(true);
      outline-offset: -1px;
    }
  }

  .accordion-item {
    color: var(--accordion-color);
    background-color: var(--accordion-bg);
    border: var(--accordion-border-width) solid var(--accordion-border-color);

    &:first-of-type {
      @include border-top-radius(var(--accordion-border-radius));

      > .accordion-header {
        @include border-top-radius(calc(var(--accordion-border-radius) - var(--accordion-border-width)));
      }
    }

    &:not(:first-of-type) {
      border-block-start: 0;
    }

    // Only set a border-radius on the last item if the accordion is collapsed
    &:last-of-type {
      @include border-bottom-radius(var(--accordion-border-radius));

      > .accordion-header {
        @include border-bottom-radius(calc(var(--accordion-border-radius) - var(--accordion-border-width)));
      }

      > .accordion-body {
        @include border-bottom-radius(var(--accordion-border-radius));
      }
    }

    // Open state - details[open] applies these styles
    &[open] {
      border-color: var(--theme-border, var(--accordion-border-color));

      > .accordion-header {
        color: var(--theme-fg, var(--accordion-active-color));
        background-color: var(--theme-bg-subtle, var(--accordion-active-bg));
        box-shadow: inset 0 calc(-1 * var(--accordion-border-width)) 0 var(--theme-border, var(--accordion-border-color));

        .accordion-icon {
          transform: var(--accordion-btn-icon-transform);
        }
      }

      // Remove bottom radius from header when open (even on last item)
      &:last-of-type > .accordion-header {
        @include border-bottom-radius(0);
      }
    }
  }

  .accordion-body {
    padding: var(--accordion-body-padding-y, var(--accordion-padding-y)) var(--accordion-body-padding-x, var(--accordion-padding-x));
  }


  // Flush accordion items
  //
  // Remove borders and border-radius to keep accordion items edge-to-edge.

  .accordion-flush {
    > .accordion-item {
      border-inline: 0;
      @include border-radius(0);

      &:first-child {
        border-block-start: 0;
      }

      &:last-child {
        border-block-end: 0;
      }

      > .accordion-header,
      > .accordion-body {
        @include border-radius(0);
      }
    }
  }
}