/* ThemeToggle — organism. Spec: component-specs/theme-toggle.md */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: var(--border-hairline) solid var(--border-default);
    border-radius: 50%;
    background: #ffffff0f;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

[data-theme='light'] .theme-toggle {
    background: #00000008;
}

@media (any-hover: hover) {
    .theme-toggle:hover {
        color: var(--text-primary);
        background: var(--stone-850);
        border-color: var(--border-interactive);
    }

    [data-theme='light'] .theme-toggle:hover {
        background: var(--stone-150);
    }
}