/* =========================================================
   LIGHT / DARK THEME TOGGLE
   ========================================================= */


/*
 * The toggle is hidden when JavaScript is unavailable.
 *
 * Without JavaScript, the site's CSS still follows the user's
 * prefers-color-scheme system/browser preference.
 */

.theme-toggle {
    display: none;
}


.js .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    min-height: 44px;

    padding:
        0.35rem 0.5rem;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        transparent;

    color:
        var(--text-muted);

    cursor:
        pointer;

    transition:
        background-color 150ms ease,
        border-color 150ms ease,
        color 150ms ease;
}


/* ---------------------------------------------------------
   ICONS
   --------------------------------------------------------- */

.theme-toggle__icon {
    width: 1.25rem;
    height: 1.25rem;

    flex: 0 0 auto;

    fill: none;

    stroke:
        currentColor;

    stroke-width: 1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    transition:
        color 150ms ease,
        opacity 150ms ease,
        transform 150ms ease;
}


/*
 * Light mode:
 * sun is emphasized.
 */

.theme-toggle[data-current-theme="light"]
.theme-toggle__icon--sun {
    color:
        var(--color-dark);

    opacity: 1;
}


.theme-toggle[data-current-theme="light"]
.theme-toggle__icon--moon {
    color:
        var(--text-muted);

    opacity: 0.65;
}


/*
 * Dark mode:
 * moon is emphasized.
 */

.theme-toggle[data-current-theme="dark"]
.theme-toggle__icon--sun {
    color:
        var(--text-muted);

    opacity: 0.65;
}


.theme-toggle[data-current-theme="dark"]
.theme-toggle__icon--moon {
    color:
        var(--color-mid);

    opacity: 1;
}


/* ---------------------------------------------------------
   TRACK
   --------------------------------------------------------- */

.theme-toggle__track {
    position: relative;

    width: 2.7rem;
    height: 1.4rem;

    flex: 0 0 auto;

    border:
        1px solid var(--border);

    border-radius:
        999px;

    background:
        var(--surface-soft);

    transition:
        background-color 150ms ease,
        border-color 150ms ease;
}


/* ---------------------------------------------------------
   SELECTOR DOT
   --------------------------------------------------------- */

.theme-toggle__thumb {
    position: absolute;

    top: 50%;
    left: 0.18rem;

    width: 0.92rem;
    height: 0.92rem;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        var(--color-dark);

    box-shadow:
        0 1px 4px
        rgba(0, 0, 0, 0.18);

    transition:
        left 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}


/*
 * Move the selector to the moon side in dark mode.
 */

.theme-toggle[data-current-theme="dark"]
.theme-toggle__thumb {
    left: 1.52rem;

    background:
        var(--color-mid);
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.theme-toggle:hover {
    background:
        var(--surface-soft);

    border-color:
        var(--color-mid);
}


/*
 * Both icons respond to hover so the entire unit clearly
 * presents itself as interactive.
 */

.theme-toggle:hover
.theme-toggle__icon {
    color:
        var(--color-mid);

    opacity: 1;
}


/*
 * The active icon gets a slight scale increase on hover.
 */

.theme-toggle[data-current-theme="light"]:hover
.theme-toggle__icon--sun,
.theme-toggle[data-current-theme="dark"]:hover
.theme-toggle__icon--moon {
    transform:
        scale(1.08);
}


.theme-toggle:hover
.theme-toggle__track {
    border-color:
        var(--color-mid);
}


/* ---------------------------------------------------------
   ACTIVE / PRESS
   --------------------------------------------------------- */

.theme-toggle:active
.theme-toggle__thumb {
    box-shadow:
        0 0 0 3px
        rgba(246, 209, 55, 0.2);
}


/* ---------------------------------------------------------
   DARK THEME
   --------------------------------------------------------- */

:root[data-theme="dark"]
.theme-toggle__track {
    background:
        rgba(255, 255, 255, 0.08);
}


:root[data-theme="dark"]
.theme-toggle[data-current-theme="dark"]
.theme-toggle__icon--moon {
    color:
        var(--color-mid);
}


/* ---------------------------------------------------------
   SYSTEM DARK MODE BEFORE AN EXPLICIT USER SELECTION
   --------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

    :root:not([data-theme="light"])
    .theme-toggle__track {
        background:
            rgba(255, 255, 255, 0.08);
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 38rem) {

    .js .theme-toggle {
        gap:
            0.3rem;

        padding-inline:
            0.4rem;
    }


    .theme-toggle__icon {
        width: 1.15rem;
        height: 1.15rem;
    }


    .theme-toggle__track {
        width: 2.5rem;
        height: 1.35rem;
    }


    .theme-toggle__thumb {
        width: 0.88rem;
        height: 0.88rem;
    }


    .theme-toggle[data-current-theme="dark"]
    .theme-toggle__thumb {
        left: 1.4rem;
    }

}