/* Avada Dark Theme – Light/Dark-Umschalter
 * Erbt Schriftfarbe und -größe vom umgebenden Avada-Element (z. B. Header-Menü),
 * Farben lassen sich über das Avada-Builder-Element oder den Shortcode setzen.
 */
.adt-color-toggle-wrapper {
    display: block;
    /* Keine Zeilenhöhe vom umgebenden Text: der Wrapper ist genau so hoch wie der Button. */
    line-height: 0;
}

button.adt-color-toggle {
    --adt-toggle-size: 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Größe = Icon-Größe + Padding (Standard 0, im Design-Tab einstellbar). */
    box-sizing: content-box;
    width: var(--adt-toggle-size);
    height: var(--adt-toggle-size);
    min-width: 0;
    min-height: 0;
    /* Padding/Margin: responsive Regeln aus ADT_Toggle::spacing_css(). */
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    color: var(--adt-toggle-color, inherit);
    font: inherit;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.adt-color-toggle:hover,
button.adt-color-toggle:focus-visible {
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: var(--adt-toggle-hover-color, var(--adt-toggle-color, inherit));
}

button.adt-color-toggle:focus {
    outline: none;
}

button.adt-color-toggle:focus-visible {
    outline: 2px solid var(--awb-color5, currentColor);
    outline-offset: 2px;
}

button.adt-color-toggle .adt-color-toggle__icon {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Icons aus Avadas Icon-Picker (Font Awesome / eigene Icon-Sets). */
button.adt-color-toggle .adt-color-toggle__icon--font {
    margin: 0;
    font-size: var(--adt-toggle-size);
    line-height: var(--adt-toggle-size);
    text-align: center;
}

button.adt-color-toggle .adt-color-toggle__icon--font::before {
    line-height: inherit;
}

/* Unter button.adt-color-toggle verschachtelt, damit die Regeln Icon-Fonts wie
 * Font Awesome (.fas { display: inline-block }) überstimmen.
 *
 * Hell: Icon für den hellen Modus zeigen (Standard: Mond).
 * Dunkel: Icon für den dunklen Modus zeigen (Standard: Sonne).
 * Rein per CSS, damit schon vor dem ersten Paint das richtige Icon steht. */
button.adt-color-toggle .adt-color-toggle__icon--dark {
    display: none;
}

html.adt-dark button.adt-color-toggle .adt-color-toggle__icon--dark {
    display: block;
}

html.adt-dark button.adt-color-toggle .adt-color-toggle__icon--light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    html:not(.adt-light) button.adt-color-toggle .adt-color-toggle__icon--dark {
        display: block;
    }

    html:not(.adt-light) button.adt-color-toggle .adt-color-toggle__icon--light {
        display: none;
    }
}