/**
 * theme_toggle.css
 * BEM namespace: .theme-toggle
 *
 * A round 40px sun/moon icon button. Lives inside the topnav slot and is
 * mounted by TopNav at construct time.
 */

.theme-toggle {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: 999px;
    color: var(--text-2);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--iris);
    outline-offset: 2px;
}

.theme-toggle__icon {
    width: 20px;
    height: 20px;
    display: none;
}

:root[data-theme="light"] .theme-toggle__icon--sun  { display: block; }
:root[data-theme="dark"]  .theme-toggle__icon--moon { display: block; }