/*
 * theme.css - shared by every layout: the theme toggle button and the theme switch
 * animation. Colours for each area live in site.css (website), Layout.dark.css (ERP)
 * and the sign-in pages themselves.
 */

/* ------------------------------------------------------------------ toggle button */
.theme-toggle {
    --tt-color: #334155;
    --tt-border: rgba(15, 23, 42, 0.12);
    --tt-hover: rgba(15, 23, 42, 0.06);
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--tt-border);
    background: transparent;
    color: var(--tt-color);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.theme-toggle:hover { background: var(--tt-hover); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }

.theme-toggle svg {
    position: absolute;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .5s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease;
}
.theme-toggle .tt-moon { fill: currentColor; stroke: none; }

/* Light theme shows the moon ("go dark"), dark theme shows the sun ("go light"). */
.theme-toggle .tt-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
.theme-toggle .tt-moon { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .tt-sun { opacity: 1; transform: rotate(0) scale(1); }
html[data-theme="dark"] .theme-toggle .tt-moon { opacity: 0; transform: rotate(90deg) scale(.4); }

html[data-theme="dark"] .theme-toggle {
    --tt-color: #e6edf3;
    --tt-border: rgba(240, 246, 252, 0.14);
    --tt-hover: rgba(240, 246, 252, 0.08);
}

/* ------------------------------------------------------------------ switch animation */
/* Modern browsers: the new theme grows as a circle from the toggle (see theme.js). */
html.theme-vt::view-transition-old(root),
html.theme-vt::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* Older browsers: a short cross-fade of colours. */
html.theme-fade,
html.theme-fade *,
html.theme-fade *::before,
html.theme-fade *::after {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, fill .35s ease, stroke .35s ease, box-shadow .35s ease !important;
}

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