:where(:scope, [data-theme="light"], [data-theme="dark"]), :host {
  --pico-accordion-border-color: var(--pico-muted-border-color);
  --pico-accordion-active-summary-color: var(--pico-primary-hover);
  --pico-accordion-close-summary-color: var(--pico-color);
  --pico-accordion-open-summary-color: var(--pico-muted-color);
}

details {
  margin-bottom: var(--pico-spacing);
  display: block;
}

details summary {
  cursor: pointer;
  transition: color var(--pico-transition);
  line-height: 1rem;
  list-style-type: none;
}

details summary:not([role]) {
  color: var(--pico-accordion-close-summary-color);
}

details summary::-webkit-details-marker {
  display: none;
}

details summary::marker {
  display: none;
}

details summary::-moz-list-bullet {
  list-style-type: none;
}

details summary:after {
  width: 1rem;
  height: 1rem;
  float: right;
  background-image: var(--pico-icon-chevron);
  content: "";
  transition: transform var(--pico-transition);
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: 1rem;
  margin-inline-start: calc(var(--pico-spacing, 1rem) * .5);
  display: block;
  transform: rotate(-90deg);
}

details summary:focus {
  outline: none;
}

details summary:focus:not([role]) {
  color: var(--pico-accordion-active-summary-color);
}

details summary:focus-visible:not([role]) {
  outline: var(--pico-outline-width) solid var(--pico-primary-focus);
  outline-offset: calc(var(--pico-spacing, 1rem) * .5);
  color: var(--pico-primary);
}

details summary[role="button"] {
  text-align: start;
  width: 100%;
}

details summary[role="button"]:after {
  height: calc(1rem * var(--pico-line-height, 1.5));
}

details[open] > summary {
  margin-bottom: var(--pico-spacing);
}

details[open] > summary:not([role]):not(:focus) {
  color: var(--pico-accordion-open-summary-color);
}

details[open] > summary:after {
  transform: rotate(0);
}

[dir="rtl"] details summary {
  text-align: end;
}

[dir="rtl"] details summary:after {
  float: left;
  background-position: 0;
}