/* box fill accent */
.quiqqer-accordion-item--boxFillAccent .quiqqer-accordion-item-header {
    color: var(--qui-colors-primary-contrast, #fff);
    background: var(--qui-colors-primary);
}

.quiqqer-accordion-item--boxFillAccent .quiqqer-accordion-item-header:is(:hover, :focus-visible) {
    background: color-mix(in oklab, var(--qui-colors-primary) 92%, black);
}

.quiqqer-accordion-item--boxFillAccent .quiqqer-accordion-item-content {
    padding-top: 1rem;
}

/* box fill accent only by opened item */
.quiqqer-accordion-item--boxFillAccentOpen .quiqqer-accordion-item-header {
    background: var(--qui-colors-surface-subtle);
}

.quiqqer-accordion-item--boxFillAccentOpen .quiqqer-accordion-item-header:is(:hover, :focus-visible) {
    background: color-mix(in oklab, var(--qui-colors-surface-subtle) 94%, black);
}

.quiqqer-accordion-item--boxFillAccentOpen[open]:not(.quiqqer-accordion-item--closing) .quiqqer-accordion-item-header {
    background: var(--qui-colors-primary);
    color: var(--qui-colors-primary-contrast, #fff);
}

.quiqqer-accordion-item--boxFillAccentOpen[open]:not(.quiqqer-accordion-item--closing) .quiqqer-accordion-item-header:is(:hover, :focus-visible) {
    background: color-mix(in oklab, var(--qui-colors-primary) 88%, black);
}

.quiqqer-accordion-item--boxFillAccentOpen .quiqqer-accordion-item-content {
    padding-top: 1rem;
}
