/*
 * Theme toggle button
 *
 * Icon-based button in the site nav that switches between light and dark
 * themes. Sun icon appears in dark mode, moon icon appears in light mode.
 * Script lives in site/next/js/theme.js.
 */

.theme-toggle {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--color-ink-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0;
    transition: color 0.15s ease;
}

.theme-toggle:hover {
    color: var(--color-primary);
}

.theme-toggle:focus-visible {
    outline: 1px solid var(--color-primary);
    outline-offset: 3px;
}

.theme-toggle svg {
    width: 1.1rem;
    height: 1.1rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Show sun in dark mode (click to switch to light), moon in light mode */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}