/*
 * Theme control — a segmented three-way switch.
 *
 * Lives in the menubar, which is dark in both themes, so it uses the menubar
 * tokens rather than the surface ones.
 */

.theme-switch {
    display: flex;
    flex: none;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-full);
    background-color: var(--color-menubar-hover);
}

.theme-switch__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 2.25rem + the wrapper's padding clears the 44px touch target (FR-008). */
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: var(--radius-full);
    color: var(--color-menubar-text);
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast);
}

.theme-switch__option:hover {
    color: var(--color-menubar-text-active);
}

.theme-switch__option[aria-pressed="true"] {
    background-color: var(--color-menubar);
    color: var(--color-menubar-text-active);
}

.theme-switch__option:focus-visible {
    outline-color: var(--color-menubar-text-active);
    outline-offset: -2px;
}

/*
 * Icons are drawn in CSS rather than inlined as SVG in the Blade file, which
 * would put presentation in the template (project-structure §6).
 */
.theme-switch__icon {
    display: block;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: var(--radius-full);
}

/* Half-filled disc — the device decides. */
.theme-switch__icon--system {
    background: linear-gradient(to right, currentcolor 50%, transparent 50%);
    box-shadow: inset 0 0 0 1.5px currentcolor;
}

/* Small filled disc inside a ring, reading as a sun. */
.theme-switch__icon--light {
    width: 0.5rem;
    height: 0.5rem;
    background-color: currentcolor;
    box-shadow: 0 0 0 2.5px var(--color-menubar-hover), 0 0 0 4px currentcolor;
}

/* Crescent, cut by an offset inset shadow. */
.theme-switch__icon--dark {
    background: transparent;
    box-shadow: inset -3.5px -1.5px 0 0 currentcolor;
    transform: rotate(-25deg);
}

@media (max-width: 480px) {
    .theme-switch__option {
        width: 2rem;
        height: 2rem;
    }
}

/* Signed out: the control sits alone, right-aligned above the content. */
.theme-switch-bar {
    display: flex;
    justify-content: flex-end;
    max-width: var(--measure);
    width: 100%;
    margin: 0 auto;
    padding: var(--space-sm) var(--space-md) 0;
}

.theme-switch-bar .theme-switch {
    background-color: var(--color-border-subtle);
}

.theme-switch-bar .theme-switch__option {
    color: var(--color-text-secondary);
}

.theme-switch-bar .theme-switch__option:hover,
.theme-switch-bar .theme-switch__option[aria-pressed="true"] {
    color: var(--color-text);
}

.theme-switch-bar .theme-switch__option[aria-pressed="true"] {
    background-color: var(--color-surface);
}

.theme-switch-bar .theme-switch__icon--light {
    box-shadow: 0 0 0 2.5px var(--color-surface), 0 0 0 4px currentcolor;
}