.quiqqer-accordion-list--softCardAccentFill {
    --accordion-columns-gap: 1rem;
    --accordion-items-gap: 1rem;
}

.quiqqer-accordion-item--softCardAccentFill {
    background: var(--accordion-softCardAccentFill-item-bg, var(--theme--qui-colors-surface-soft, var(--qui-colors-surface-subtle)));
    border-radius: var(--accordion-softCardAccentFill-radius, var(--qui-radius-card));
    color: var(--accordion-softCardAccentFill-item-color, inherit);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.quiqqer-accordion-item--softCardAccentFill[data-open="1"] {
    --_bg-color: var(--accordion-softCardAccentFill-item-open-bg, var(--qui-colors-primary));

    background: var(--_bg-color);
    color: var(--accordion-softCardAccentFill-item-open-color, var(--qui-colors-primary--accent));
}

.quiqqer-accordion-item--softCardAccentFill .quiqqer-accordion-item-header--softCard {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: var(--accordion-header-font-size, 1rem);
    font-weight: var(--accordion-header-font-weight, 500);
    gap: 1rem;
    margin: 0;
    padding: var(--accordion-softCardAccentFill-header-padding, 1.125rem 1.25rem);
}

.quiqqer-accordion-item--softCardAccentFill .quiqqer-accordion-item-header-text {
    flex-grow: 1;
}

.quiqqer-accordion-item--softCardAccentFill .quiqqer-accordion-item-header-icon {
    align-items: center;
    background: var(--accordion-softCardAccentFill-icon-bg, var(--qui-colors-surface));
    border-radius: 50%;
    color: var(--accordion-softCardAccentFill-icon-color, inherit);
    display: inline-flex;
    height: var(--accordion-softCardAccentFill-icon-size, 2rem);
    justify-content: center;
    line-height: 1;
    min-width: var(--accordion-softCardAccentFill-icon-size, 2rem);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.quiqqer-accordion-item--softCardAccentFill[data-open="1"] .quiqqer-accordion-item-header-icon {
    background: var(--accordion-softCardAccentFill-icon-open-bg, var(--accordion-softCardAccentFill-icon-bg, var(--qui-colors-surface)));
    color: var(--accordion-softCardAccentFill-icon-open-color, var(--qui-colors-primary));
}

.quiqqer-accordion-list--icon-left .quiqqer-accordion-item--softCardAccentFill .quiqqer-accordion-item-header-icon {
    margin-left: 0;
    order: -1;
}

.quiqqer-accordion-item--softCardAccentFill .quiqqer-accordion-item-content--softCard {
    padding: 0 1.25rem 1.25rem;
    color: var(--accordion-softCardAccentFill-content-color, color-mix(in oklab, currentColor 85%, var(--_bg-color)));
}
