/* box outline accent */
.quiqqer-accordion-item--boxOutlineAccent .quiqqer-accordion-item-header {
    border: var(--_border-width) var(--_border-style) var(--qui-colors-primary);
}

.quiqqer-accordion-item--boxOutlineAccent .quiqqer-accordion-item-header:is(:hover, :focus-visible) {
    background: color-mix(in oklab, transparent 90%, var(--qui-colors-primary));
    /*border-color: currentColor;*/
}

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

/* box outline accent only by opened item */
.quiqqer-accordion-item--boxOutlineAccentOpen .quiqqer-accordion-item-header {
    border: var(--_border-width) var(--_border-style) var(--qui-border-color);
}

.quiqqer-accordion-item--boxOutlineAccentOpen .quiqqer-accordion-item-header:is(:hover, :focus-visible) {
    background: color-mix(in oklab, transparent 84%, var(--_border-color));
}

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

/* state open */
.quiqqer-accordion-item--boxOutlineAccentOpen[data-open="1"] .quiqqer-accordion-item-header {
    border-color: var(--qui-colors-primary);
}

.quiqqer-accordion-item--boxOutlineAccentOpen[data-open="1"] .quiqqer-accordion-item-header:is(:hover, :focus-visible) {
    background: color-mix(in oklab, transparent 90%, var(--qui-colors-primary));
}