.x-accordion::details-content {
  content-visibility: hidden;
  padding-inline: var(--accordion-summary-padding-inline);
  transition: content-visibility var(--accordion-duration) ease allow-discrete,
    grid-template-rows var(--accordion-duration) ease,
    padding-block-start var(--accordion-duration) ease,
    padding-block-end var(--accordion-duration) ease;
  grid-template-rows: 0fr;
  padding-block: 0;
  display: grid;
  overflow: clip;
}

.x-accordion[open]::details-content {
  content-visibility: visible;
  grid-template-rows: 1fr;
  padding-block-start: var(--accordion-summary-padding-block);
  padding-block-end: var(--accordion-summary-padding-block);
}

.x-accordion > :not(summary) {
  min-block-size: 0;
  overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  .x-accordion::details-content {
    transition: none;
  }
}

.x-accordion > summary {
  cursor: var(--cursor-button);
  align-items: center;
  gap: var(--space-2);
  padding: var(--accordion-summary-padding-block)
    var(--accordion-summary-padding-inline);
  font-size: var(--accordion-font-size);
  color: var(--accent-11);
  -webkit-user-select: none;
  user-select: none;
  font-weight: 500;
  line-height: 1.4;
  list-style: none;
  transition: background-color .12s ease-out;
  display: flex;
}

.x-accordion > summary::-webkit-details-marker {
  display: none;
}

.x-accordion > summary:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -2px;
}

.x-accordion:where([data-size="1"]) {
  --accordion-summary-padding-block: var(--space-2);
  --accordion-summary-padding-inline: var(--space-3);
  --accordion-font-size: var(--font-size-2);
  --accordion-duration: .18s;
}

.x-accordion:where([data-size="2"]) {
  --accordion-summary-padding-block: var(--space-3);
  --accordion-summary-padding-inline: var(--space-4);
  --accordion-font-size: var(--font-size-3);
  --accordion-duration: .2s;
}

.x-accordion:where([data-size="3"]) {
  --accordion-summary-padding-block: var(--space-4);
  --accordion-summary-padding-inline: var(--space-5);
  --accordion-font-size: var(--font-size-4);
  --accordion-duration: .22s;
}

.x-accordion:where(:not([data-size])) {
  --accordion-summary-padding-block: var(--space-3);
  --accordion-summary-padding-inline: var(--space-4);
  --accordion-font-size: var(--font-size-3);
  --accordion-duration: .2s;
}

.x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"]) {
  border-radius: var(--radius-4);
  --accordion-summary-bg: transparent;
  --accordion-summary-hover-bg: var(--neutral-a2);
  --accordion-body-bg: var(--neutral-a2);
  overflow: hidden;
}

:where(.dark, .dark-theme) .x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"]) {
  --accordion-summary-bg: var(--neutral-a2);
  --accordion-summary-hover-bg: var(--neutral-a3);
  --accordion-body-bg: transparent;
}

.x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"]) > summary {
  background-color: var(--accordion-summary-bg);
}

.x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"])::details-content {
  background-color: var(--accordion-body-bg);
}

@media (hover: hover) {
  .x-accordion:where(:not([data-variant]), [data-variant="surface"], [data-variant="soft"]) > summary:where(:hover) {
    background-color: var(--accordion-summary-hover-bg);
  }
}

.x-accordion:where(:not([data-variant]), [data-variant="surface"]) {
  background-color: var(--color-material, var(--color-surface));
  border: 1px solid var(--neutral-a5);
}

.x-accordion:where([data-variant="soft"]) {
  background-color: var(--accent-a2);
  --accordion-summary-bg: var(--accent-a2);
  --accordion-summary-hover-bg: var(--accent-a3);
  --accordion-body-bg: transparent;
}

:where(.dark, .dark-theme) .x-accordion:where([data-variant="soft"]) {
  background-color: var(--accent-a2);
  --accordion-summary-bg: var(--accent-a2);
  --accordion-summary-hover-bg: var(--accent-a3);
}

.x-accordion:where(:not([data-variant]), [data-variant="surface"]) + .x-accordion:where(:not([data-variant]), [data-variant="surface"]) {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  margin-block-start: -1px;
}

.x-accordion:where(:not([data-variant]), [data-variant="surface"]):has( + .x-accordion:where(:not([data-variant]), [data-variant="surface"])) {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.x-accordion:where([data-variant="soft"]) + .x-accordion:where([data-variant="soft"]) {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

.x-accordion:where([data-variant="soft"]):has( + .x-accordion:where([data-variant="soft"])) {
  border-end-end-radius: 0;
  border-end-start-radius: 0;
}

.x-accordion:where([data-variant="borderless"]) > summary {
  color: var(--accent-a11);
  padding-inline: 0;
  transition: background-color .12s ease-out, color .12s ease-out;
}

@media (hover: hover) {
  .x-accordion:where([data-variant="borderless"]) > summary:where(:hover) {
    color: var(--accent-12);
  }
}

.x-accordion:where([data-variant="borderless"][open]) > summary {
  color: var(--accent-12);
}

.x-accordion:where([data-variant="borderless"])::details-content {
  padding-inline: 0;
}

.x-accordion:where([aria-disabled="true"]) {
  opacity: .6;
}

.x-accordion:where([aria-disabled="true"]) > summary {
  pointer-events: none;
  cursor: var(--cursor-disabled);
}