/* Theme Mode Switch (Light / Auto / Dark) */
.theme-mode-switch {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    user-select: none;
    width: 100%;
}

.theme-mode-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    border-radius: var(--radius-xs);
    overflow: hidden;
    background-color: var(--color-secondary-bg);
}

.theme-mode-toggle input[type="radio"] {
    display: none;
}

.theme-mode-toggle label {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-small);
    text-align: center;
    cursor: pointer;
    background-color: var(--color-secondary-bg);
    transition: background-color var(--duration-base), color var(--duration-base), font-weight var(--duration-base);
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: var(--line-height-tight);
}

/* Active state for checked radio button */
.theme-mode-toggle input:checked + label {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

/* Hover effect */
.theme-mode-toggle label:hover {
    background-color: var(--color-secondary-hover);
}

/* Specific state for each label when selected */
#theme-light:checked + label {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

#theme-auto:checked + label {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}

#theme-dark:checked + label {
    background-color: var(--color-primary);
    color: var(--color-primary-contrast);
}