/* Gemeinsame Aktionsrollen. Branding-/Operator-Layouts liefern ihre Farbquellen. */
:root {
    --button-primary: var(--bs-primary);
    --button-warning: var(--bs-warning);
    --button-danger: var(--bs-danger);
    --button-bg: var(--bs-body-bg);
    --button-text: var(--bs-body-color);
    --button-on-color: var(--bs-white);
    --button-warning-text: var(--bs-dark);
    --button-neutral-border: color-mix(in srgb, var(--button-text) 38%, var(--button-bg));
    --button-neutral-hover: color-mix(in srgb, var(--button-text) 8%, var(--button-bg));
}

/* Bestehende success/info-Klassen bleiben kompatibel mit der Primärrolle. */
:root .btn {
    --action-color: var(--button-primary);
    --action-bg: var(--action-color);
    --action-text: var(--button-on-color);
    --action-border: var(--action-color);
    --action-hover-bg: color-mix(in srgb, var(--action-color) 86%, var(--button-text));
    --action-hover-text: var(--action-text);
    --action-hover-border: var(--action-hover-bg);
    --action-active-bg: color-mix(in srgb, var(--action-color) 76%, var(--button-text));
    --action-active-text: var(--action-text);
    --action-active-border: var(--action-color);
    --action-ring: color-mix(in srgb, var(--action-color) 40%, transparent);
    background-color: var(--action-bg) !important;
    background-image: none !important;
    color: var(--action-text) !important;
    border-color: var(--action-border) !important;
    border-width: thin;
    border-style: solid;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

:root .btn:is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark) {
    --action-color: var(--button-neutral-border);
    --action-bg: var(--button-bg);
    --action-text: var(--button-text);
    --action-border: var(--button-neutral-border);
    --action-hover-bg: var(--button-neutral-hover);
    --action-hover-text: var(--button-text);
    --action-hover-border: color-mix(in srgb, var(--button-text) 58%, var(--button-bg));
    --action-active-bg: color-mix(in srgb, var(--button-text) 14%, var(--button-bg));
}

:root .btn:is(.btn-danger, .btn-outline-danger) {
    --action-color: var(--button-danger);
}

:root .btn:is(.btn-warning, .btn-outline-warning) {
    --action-color: var(--button-warning);
    --action-text: var(--button-warning-text);
    --action-hover-text: var(--button-warning-text);
    --action-active-text: var(--button-warning-text);
}

:root .btn:is(.btn-outline-primary, .btn-outline-success, .btn-outline-info, .btn-outline-danger, .btn-outline-warning) {
    --action-bg: transparent;
    --action-text: var(--action-color);
    --action-hover-bg: color-mix(in srgb, var(--action-color) 12%, var(--button-bg));
    --action-hover-text: var(--action-color);
    --action-hover-border: var(--action-color);
    --action-active-bg: color-mix(in srgb, var(--action-color) 22%, var(--button-bg));
    --action-active-text: var(--action-color);
}

/* Auf heller Warnfläche bleibt die Schrift dunkel statt kontrastarm orange. */
:root .btn.btn-outline-warning {
    --action-text: var(--button-text);
    --action-hover-text: var(--button-text);
    --action-active-text: var(--button-text);
}

:root .btn.btn-link {
    --action-bg: transparent;
    --action-text: var(--button-primary);
    --action-border: transparent;
    --action-hover-bg: transparent;
    --action-hover-text: var(--button-primary);
    --action-hover-border: transparent;
    --action-active-bg: transparent;
    --action-active-text: var(--button-primary);
    --action-active-border: transparent;
}

/* Neutrale Filter-/Auswahlschalter markieren die bestehende Auswahl primär. */
:root .btn:is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark):is(.active, [aria-pressed="true"]),
:root .btn-check:checked + .btn:is(.btn-secondary, .btn-outline-secondary, .btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark) {
    --action-color: var(--button-primary);
    --action-bg: color-mix(in srgb, var(--button-primary) 22%, var(--button-bg));
    --action-text: var(--button-primary);
    --action-border: var(--button-primary);
    --action-active-bg: var(--action-bg);
    --action-active-text: var(--button-primary);
}

:root .btn:where(:hover):not(:disabled):not(.disabled) {
    background-color: var(--action-hover-bg) !important;
    color: var(--action-hover-text) !important;
    border-color: var(--action-hover-border) !important;
}

:root .btn:is(:active, .active, [aria-pressed="true"]):not(:disabled):not(.disabled),
:root .btn-check:checked + .btn {
    background-color: var(--action-active-bg) !important;
    color: var(--action-active-text) !important;
    border-color: var(--action-active-border) !important;
}

:root .btn:focus-visible,
:root .btn-check:focus-visible + .btn {
    outline: 2px solid var(--action-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem var(--action-ring) !important;
}

:root .btn:is(:disabled, .disabled),
:root .btn-check:disabled + .btn {
    background-color: var(--action-bg) !important;
    color: var(--action-text) !important;
    border-color: var(--action-border) !important;
    opacity: .5;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Schließen-Symbole folgen auch bei anderen Textfarben der neutralen Rolle. */
:root .btn-close {
    position: relative;
    color: var(--button-text);
    background-image: none;
    opacity: .65;
    filter: none;
}

:root .btn-close::before {
    content: "";
    position: absolute;
    width: 1em;
    height: 1em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: currentColor;
    mask: var(--bs-btn-close-bg) center / contain no-repeat;
    pointer-events: none;
}

:root .btn-close:hover { opacity: 1; }
:root .alert-dismissible .btn-close { position: absolute; }
:root .btn-close:focus-visible {
    outline: 2px solid var(--button-neutral-border);
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--button-text) 18%, transparent);
    opacity: 1;
}
:root .btn-close:is(:disabled, .disabled) { opacity: .3; }

:root :is(.modal-close, .legal-modal-close) {
    color: var(--button-text);
    background: transparent;
}

:root :is(.modal-close, .legal-modal-close):focus-visible {
    outline: 2px solid var(--button-neutral-border);
    outline-offset: 2px;
}

:root .nav-pills .nav-link.active {
    background-color: var(--button-primary);
    color: var(--button-on-color);
}

:root :is(.nav-tabs .nav-link.active, .accordion-button:not(.collapsed)) {
    background-color: color-mix(in srgb, var(--button-primary) 12%, var(--button-bg));
    color: var(--button-primary);
    border-color: var(--button-primary);
}

:root :is(.nav-link, .accordion-button):focus-visible {
    outline: 2px solid var(--button-primary);
    outline-offset: 2px;
    box-shadow: none;
}