@layer components {
    :root {
        --day-and-night-board-cell: var(--secondary-system-grouped-background);
        --day-and-night-board-given: color-mix(
            in oklch,
            var(--label) 10%,
            var(--day-and-night-board-cell)
        );
        --day-and-night-board-line: var(--separator);
        --day-and-night-board-sun: light-dark(oklch(0.72 0.16 70), oklch(0.82 0.14 80));
        --day-and-night-board-moon: light-dark(oklch(0.48 0.09 270), oklch(0.8 0.06 270));
        --day-and-night-board-broken: light-dark(oklch(0.55 0.2 27), oklch(0.72 0.17 27));
        --day-and-night-board-broken-background: color-mix(
            in oklch,
            var(--day-and-night-board-broken) 24%,
            var(--day-and-night-board-cell)
        );
        --day-and-night-board-wrong: var(--day-and-night-board-broken);
        --day-and-night-board-pressed: color-mix(
            in oklch,
            var(--label) 6%,
            var(--day-and-night-board-cell)
        );
    }

    .day-and-night-board {
        display: grid;
        gap: 0.25rem;
        grid-template-columns: repeat(4, 1fr);
        inline-size: min(100%, 20rem);
        user-select: none;

        &.day-and-night-board--size-6 {
            grid-template-columns: repeat(6, 1fr);
            inline-size: min(100%, 24rem);
        }

        &.day-and-night-board--size-8 {
            grid-template-columns: repeat(8, 1fr);
            inline-size: min(100%, 27rem);
        }

        &.day-and-night-board--size-10 {
            gap: 0.1875rem;
            grid-template-columns: repeat(10, 1fr);
            inline-size: min(100%, 30rem);
        }
    }

    .day-and-night-board__form {
        display: grid;
    }

    .day-and-night-board__cell {
        align-items: center;
        aspect-ratio: 1;
        background-color: var(--day-and-night-board-cell);
        border: none;
        border-radius: 0.5rem;
        display: flex;
        inline-size: 100%;
        justify-content: center;
        min-block-size: 2rem;
        padding: 0;
        -webkit-tap-highlight-color: transparent;

        &:active {
            background-color: var(--day-and-night-board-pressed);
        }

        &:focus-visible {
            outline: 0.1875rem solid var(--tint);
            outline-offset: -0.1875rem;
        }

        &.day-and-night-board__cell--given {
            background-color: var(--day-and-night-board-given);
        }

        &.day-and-night-board__cell--broken {
            background-color: var(--day-and-night-board-broken-background);
        }

        &.day-and-night-board__cell--wrong {
            box-shadow: inset 0 0 0 0.1875rem var(--day-and-night-board-wrong);
        }
    }

    .day-and-night-board__glyph {
        block-size: 70%;
        inline-size: 70%;

        &.day-and-night-board__glyph--sun {
            color: var(--day-and-night-board-sun);
            fill: currentColor;
        }

        &.day-and-night-board__glyph--moon {
            color: var(--day-and-night-board-moon);
            fill: currentColor;
        }
    }
}