:where(.c-base-accordion) {
    position: relative;
    overflow: hidden;
    width: calc(12 * var(--theme-layout-column-of-12, var(--theme-layout-column-of-12--sm)) + 11 * var(--theme-layout-gutter, var(--theme-layout-gutter--sm)))
}

@media (min-width: 80em) {
    :where(.c-base-accordion) {
        width: calc(8 * var(--theme-layout-column-of-12, var(--theme-layout-column-of-12--sm)) + 7 * var(--theme-layout-gutter, var(--theme-layout-gutter--sm)))
    }
}

:where(.c-base-accordion) .c-block-list--ctx--in-accordion {
    gap: var(--theme-spacing-2xl, var(--theme-spacing-2xl--sm));
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0
}

:is(:where(.c-base-accordion) .c-block-list--ctx--in-accordion) > * + * {
    margin-top: 0
}

:where(.c-base-accordion) .c-accordion-header {
    border-color: transparent
}

[aria-expanded=false]:is(:where(.c-base-accordion) .c-accordion-header) {
    --un-border-opacity: 1;
    border-color: rgb(var(--theme-colors-border-subtle-on-X) / var(--un-border-opacity));
    transition: border-color .3s cubic-bezier(.4,0,.2,1) .55s
}

:where(.c-base-accordion--color--surface) .c-accordion-header {
    border-width: 0px;
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceOnIndent);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceOnIndentHover);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceOnIndentActive);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceOnIndent);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceOnIndentHover);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceOnIndentActive);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceInteractive);
    padding-left: var(--theme-spacing-md, var(--theme-spacing-md--sm));
    padding-right: var(--theme-spacing-xs, var(--theme-spacing-xs--sm));
    border-radius: var(--theme-borderRadius-xs, var(--theme-borderRadius-xs--sm))
}

    :where(.c-base-accordion--color--surface) .c-accordion-header:hover {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceHover) / var(--un-bg-opacity))
    }

    :where(.c-base-accordion--color--surface) .c-accordion-header[aria-expanded=true] {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceActive) / var(--un-bg-opacity));
        border-bottom-right-radius: var(--theme-borderRadius-none, var(--theme-borderRadius-none--sm));
        border-bottom-left-radius: var(--theme-borderRadius-none, var(--theme-borderRadius-none--sm))
    }

:where(.c-base-accordion--color--surface) .c-accordion-panel {
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceOnIndent);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceOnIndentHover);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceOnIndentActive);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceOnIndent);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceOnIndentHover);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceOnIndentActive);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceInteractive);
    padding-inline: var(--theme-spacing-md, var(--theme-spacing-md--sm))
}

:where(.c-base-accordion--color--surfaceVariant) .c-accordion-header {
    margin-bottom: 1px;
    border-width: 0px;
    --un-text-opacity: 1;
    color: rgb(var(--theme-colors-text-interactive-on-X) / var(--un-text-opacity));
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceVariantStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceVariantMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceVariantSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceVariantDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceVariantDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceVariantInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceVariantInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceVariantInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceVariantOnIndent);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceVariantOnIndentActive);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceVariantOnIndentHover);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceVariantIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceVariantIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceVariantStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceVariantMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceVariantSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceVariantDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceVariantDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceVariantInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceVariantOnIndent);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentActive);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentHover);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceVariantExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceVariantStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceVariantMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceVariantSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceVariantDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceVariantInteractive);
    padding-left: var(--theme-spacing-md, var(--theme-spacing-md--sm));
    padding-right: var(--theme-spacing-xs, var(--theme-spacing-xs--sm));
    border-radius: var(--theme-borderRadius-xs, var(--theme-borderRadius-xs--sm))
}

    :where(.c-base-accordion--color--surfaceVariant) .c-accordion-header:hover {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceVariantHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceVariantHover) / var(--un-bg-opacity))
    }

    :where(.c-base-accordion--color--surfaceVariant) .c-accordion-header[aria-expanded=true] {
        margin-bottom: 0;
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceVariantActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceVariantActive) / var(--un-bg-opacity));
        border-bottom-right-radius: var(--theme-borderRadius-none, var(--theme-borderRadius-none--sm));
        border-bottom-left-radius: var(--theme-borderRadius-none, var(--theme-borderRadius-none--sm))
    }

:where(.c-base-accordion--color--surfaceVariant) .c-accordion-panel {
    margin-bottom: 1px;
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceOnIndent);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceOnIndentHover);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceOnIndentActive);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceOnIndent);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceOnIndentHover);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceOnIndentActive);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceInteractive);
    padding-inline: var(--theme-spacing-md, var(--theme-spacing-md--sm))
}

.t-accordion-layout__panel-enter-active, .t-accordion-layout__panel-leave-active {
    transition: max-height .7s cubic-bezier(.5,.035,.19,1)
}

.t-accordion-layout__panel-enter-from, .t-accordion-layout__panel-leave-to {
    max-height: 0
}