:host {
  /* colors */
  --ld-accordion-col: var(--ld-col-neutral-900);
  --ld-accordion-col-disabled: var(--ld-col-neutral-100);
  --ld-accordion-col-hover: var(--ld-col-neutral-900);
  --ld-accordion-col-focus: var(--ld-col-neutral-900);
  --ld-accordion-bg-col: var(--ld-col-wht);
  --ld-accordion-bg-col-active: var(--ld-col-wht);
  --ld-accordion-bg-col-disabled: var(--ld-col-neutral-100);
  --ld-accordion-bg-col-focus: var(--ld-col-neutral-100);
  --ld-accordion-bg-col-hover: var(--ld-col-neutral-050);
  --ld-accordion-trigger-icon-col-disabled: var(--ld-col-neutral-100);

  /* themable colors */
  --ld-accordion-col-active: var(--ld-thm-primary);
  --ld-accordion-col-selected: var(--ld-thm-primary);
  --ld-accordion-toggle-col: inherit;
  --ld-accordion-toggle-indicator-bg-col: transparent;
  --ld-accordion-toggle-trigger-col: var(--ld-thm-primary);
  --ld-accordion-trigger-icon-col: var(--ld-thm-primary);
  --ld-accordion-trigger-icon-col-hover: var(--ld-thm-primary-hover);
  --ld-accordion-trigger-icon-col-focus: var(--ld-thm-primary-focus);
  --ld-accordion-trigger-icon-col-active: var(--ld-thm-primary-active);
  --ld-accordion-toggle-expanded-col: var(--ld-thm-primary);

  /* layout */
  --ld-accordion-padding-y: 0.45rem;
  --ld-accordion-padding-x: 1.25rem;
  --ld-accordion-toggle-size: 2.5rem;
  --ld-accordion-toggle-line-height: 180%;
  --ld-accordion-border-radius-size: 0;
  --ld-accordion-border-radius: var(--ld-accordion-border-radius-size);
  --ld-accordion-gap: var(--ld-sp-2);
  --ld-accordion-gap-col: var(--ld-accordion-panel-border-top-col);
  --ld-accordion-panel-border-top-col: var(--ld-col-neutral-010);

  &(:where(.ld-accordion)) {
    color-scheme: var(--ld-accordion-color-scheme, none);
    display: block;
    flex-grow: 1;
  }

  &(.ld-accordion--rounded) {
    --ld-accordion-border-radius-size: var(--ld-br-m);
  }

  &(.ld-accordion--dark) {
    --ld-accordion-bg-col: var(--ld-col-neutral-010);
    --ld-accordion-bg-col-active: var(--ld-col-neutral-010);
    --ld-accordion-panel-border-top-col: var(--ld-col-neutral-050);
  }

  &(.ld-accordion--brand-color) {
    --ld-accordion-bg-col-hover: var(--ld-thm-primary-alpha-lowest);
    --ld-accordion-bg-col-focus: var(--ld-thm-primary-alpha-low);
  }

  &(.ld-accordion--detached) {
    --ld-accordion-gap: var(--ld-sp-8);
    --ld-accordion-gap-col: transparent;
  }

  &(.ld-accordion:not(.ld-accordion--detached)) {
    ::slotted(ld-accordion-section) {
      --ld-accordion-border-radius: 0;
    }
    ::slotted(ld-accordion-section:first-of-type) {
      --ld-accordion-border-radius: var(--ld-accordion-border-radius-size)
        var(--ld-accordion-border-radius-size) 0 0;
    }
    ::slotted(ld-accordion-section:last-of-type) {
      --ld-accordion-border-radius: 0 0 var(--ld-accordion-border-radius-size)
        var(--ld-accordion-border-radius-size);
    }
  }

  ::slotted(ld-accordion-section:not(:first-of-type)) {
    border-top: solid var(--ld-accordion-gap) var(--ld-accordion-gap-col);
  }
}
