@layer components {
  :root {
    --accordion-wrapper-padding: 0px;
    --accordion-inner-padding: 1em 1.5em;
    --accordion-gap: 0em;
    --accordion-radius: none;
    --accordion-section-radius: none;
    --accordion-border: none;
    --accordion-inner-margin: 0px;
    --accordion-divider-width: 2px;
    --accordion-icon-expanded-transform: rotate(180deg);
    --accordion-icon-transition: all var(--duration-speed-quick) ease-in;
    --accordion-icon-collapsed-transform: rotate(0deg);
    --accordion-closed-divider-lightness: 20%;
  }

  .accordion-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--accordion-gap);
    width: 100%;
    margin: 0px;
    padding: var(--accordion-wrapper-padding);
    border: var(--accordion-border);
    border-radius: var(--accordion-radius);
    overflow: hidden;
  }

  .accordion-section {
    border-radius: var(--accordion-section-radius);
    overflow: hidden;
    position: relative;
  }

  .accordion-trigger {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    border-style: none;
    margin: var(--accordion-inner-margin);
    padding: var(--accordion-inner-padding);
  }

  .accordion-wrapper .accordion-section .accordion-trigger:not(:last-child) {
    border-top: var(--accordion-divider-width);
  }

  .accordion-section[open] > .accordion-trigger {
    border-bottom: none;
  }

  .accordion-wrapper > .accordion-trigger:last-child {
    border-bottom: none;
  }

  .accordion-title {
    display: block;
  }

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

  .accordion-section[open] .accordion-trigger .accordion-icon {
    transform: var(--accordion-icon-expanded-transform);
  }

  .accordion-section:not(:first-child) {
    border-top: var(--accordion-divider-width) solid
      color-mix(
        in oklch,
        var(--color-border) var(--accordion-closed-divider-lightness),
        var(--color-background)
      );
  }

  .accordion-section[open] {
    opacity: 1;
    z-index: 2;
  }

  .accordion-section[open] + .accordion-section {
    border-top-color: transparent;
  }

  .accordion-panel {
    position: relative;
    z-index: 1;
    margin: var(--accordion-inner-margin);
    padding: var(--accordion-inner-padding);
    border-top: var(--accordion-divider-width) solid var(--color-border);
    border-bottom: var(--accordion-divider-width) solid var(--color-border);
  }

  .accordion-panel.panel-hidden {
    display: none;
  }

  .accordion-section[open]:not(:last-child) {
    margin-bottom: calc(-1 * var(--accordion-divider-width));
    position: relative;
    z-index: 1;
  }

  .accordion-wrapper .accordion-section:last-child .accordion-panel {
    border-bottom: none;
  }
}