/*
 * EMODITAC compact toggle component.
 *
 * This is intentionally a self-contained port of the EMODIBOK switch
 * contract. The paired native checkbox remains the data source; the button
 * is the accessible, keyboard-focusable visual control.
 */
.emoditac-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.emoditac-toggle-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: var(--emoditac-toggle-width) !important;
    min-width: var(--emoditac-toggle-width) !important;
    height: var(--emoditac-toggle-height) !important;
    min-height: var(--emoditac-toggle-height) !important;
    padding: var(--emoditac-toggle-knob-offset) !important;
    border: 1px solid var(--emoditac-color-primary) !important;
    border-radius: 100px !important;
    outline: none !important;
    overflow: visible !important;
    background: var(--emoditac-color-primary-soft) !important;
    color: var(--emoditac-color-text) !important;
    -webkit-text-fill-color: var(--emoditac-color-text) !important;
    box-shadow: var(--emoditac-toggle-off-shadow) !important;
    backdrop-filter: var(--emoditac-glass-backdrop-filter) !important;
    -webkit-backdrop-filter: var(--emoditac-glass-backdrop-filter) !important;
    cursor: pointer !important;
    transform: none !important;
    transition: var(--emoditac-toggle-transition) !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch::after {
    content: '' !important;
    display: block !important;
    width: var(--emoditac-toggle-knob-size) !important;
    height: var(--emoditac-toggle-knob-size) !important;
    border-radius: 100px !important;
    background: var(--emoditac-color-text) !important;
    box-shadow: 0 1px 2px var(--emoditac-color-shadow) !important;
    transform: translateX(0) !important;
    transition: var(--emoditac-toggle-knob-transition) !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch .emoditac-toggle-button__text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

/*
 * OFF: preserve the canonical orange border/glow at rest. Pointer hover and
 * press deliberately keep this exact visual state; the switch only changes
 * when its underlying value changes. This also neutralises generic .button
 * hover rules from wp-admin and the chat UI.
 */
button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:not(.is-active):not([aria-pressed="true"]):is(:hover, :focus, :active) {
    border-color: var(--emoditac-color-primary) !important;
    background: var(--emoditac-color-primary-soft) !important;
    color: var(--emoditac-color-text) !important;
    -webkit-text-fill-color: var(--emoditac-color-text) !important;
    box-shadow: var(--emoditac-toggle-off-shadow) !important;
    transform: none !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:not(.is-active):not([aria-pressed="true"]):focus-visible {
    border-color: var(--emoditac-color-primary) !important;
    background: var(--emoditac-color-primary-soft) !important;
    box-shadow: var(--emoditac-toggle-off-shadow), var(--emoditac-toggle-focus-shadow) !important;
}

/* ON: solid primary surface with no persistent orange glow or hover mutation. */
button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:is(.is-active, [aria-pressed="true"]),
button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:is(.is-active, [aria-pressed="true"]):is(:hover, :focus, :active) {
    border-color: var(--emoditac-color-primary) !important;
    background: var(--emoditac-color-primary) !important;
    color: var(--emoditac-color-text-inverse) !important;
    -webkit-text-fill-color: var(--emoditac-color-text-inverse) !important;
    box-shadow: none !important;
    transform: none !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:is(.is-active, [aria-pressed="true"])::after {
    background: var(--emoditac-color-text) !important;
    transform: translateX(var(--emoditac-toggle-knob-travel)) !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:is(.is-active, [aria-pressed="true"]):focus-visible {
    box-shadow: var(--emoditac-toggle-focus-shadow) !important;
}

button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch:disabled,
button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch[aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: .55 !important;
    box-shadow: none !important;
}

.emoditac-toggle__label {
    margin: 0 !important;
    padding: 0 !important;
    color: var(--emoditac-color-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
}

@media (prefers-reduced-motion: reduce) {
    button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch,
    button.emoditac-toggle__switch.emoditac-toggle-button.emoditac-toggle-button--switch::after {
        transition: none !important;
    }
}