.theme-toggle {
    width: 34px;
    height: 28px;
    padding: 0 !important;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--fg);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: var(--fg);
    color: var(--bg);
    outline: none;
}

.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: block; }