:root {
    color-scheme: dark;
}

html[data-vizento-theme="light"] {
    color-scheme: light;
}

.vizento-theme-toggle {
    align-items: center;
    background: transparent;
    border: 1px solid currentColor;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    height: 42px;
    justify-content: center;
    padding: 0;
    position: relative;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
    width: 42px;
}

.vizento-theme-toggle:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.vizento-theme-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.vizento-theme-toggle:active {
    transform: translateY(1px);
}

.vizento-theme-toggle i {
    font-size: 15px;
    line-height: 1;
}

.vizento-theme-toggle .fa-moon,
html[data-vizento-theme="light"] .vizento-theme-toggle .fa-sun {
    display: none;
}

html[data-vizento-theme="light"] .vizento-theme-toggle .fa-moon {
    display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
    .vizento-theme-toggle {
        transition: none;
    }
}