/* The settings page (/settings). The switches are in style.css. */

.theme-choice {
    display: flex;
    gap: 0.5rem;
    margin: 0.75rem 0;
    border: none;

    label {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
        padding: 0.75rem 0.5rem;
        border: 1px solid var(--color-main-stroke);
        border-radius: 0.5rem;
        font-family: var(--font-secondary);
        cursor: pointer;

        /* The radio itself is hidden; the tile is the control. */
        input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        span {
            line-height: 1.2;
        }

        .fa-solid {
            font-size: 1.5em;
        }

        /* The System tile's icon: a phone, or at the sidebar's width a laptop. */
        .wide {
            display: none;
        }

        @media (min-width: 50em) {
            .wide {
                display: initial;
            }

            .narrow {
                display: none;
            }
        }

        &:has(input:checked) {
            border-color: var(--color-link);
            background-color: var(--color-main-tint-background);
            box-shadow: inset 0 0 0 1px var(--color-link);
        }

        &:has(input:focus-visible) {
            outline: 2px solid var(--color-link);
            outline-offset: 2px;
        }
    }
}