@layer components {
    :root {
        --codeword-board-tile: var(--opaque-separator);
        --codeword-board-typed: var(--secondary-label);
        --codeword-board-label: var(--label);
        --codeword-board-correct: var(--tint);
        --codeword-board-correct-label: light-dark(
            oklch(100% 0 0deg),
            var(--tint-label)
        );
        --codeword-board-present: var(--tint);
        --codeword-board-absent: light-dark(
            oklch(89% 0.025 75deg),
            oklch(33% 0.02 60deg)
        );
        --codeword-board-absent-label: var(--secondary-label);
    }

    .codeword-board {
        display: grid;
        gap: 0.375rem;
        inline-size: min(100%, 17rem);
        user-select: none;

        &.codeword-board--length-4 {
            inline-size: min(100%, 14rem);
        }
    }

    .codeword-board__row {
        display: grid;
        gap: 0.375rem;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
    }

    .codeword-board__tile {
        align-items: center;
        aspect-ratio: 1;
        border: 0.125rem solid var(--codeword-board-tile);
        border-radius: 0.5rem;
        color: var(--codeword-board-label);
        display: flex;
        font-size: 1.625rem;
        font-weight: 700;
        justify-content: center;
        text-transform: uppercase;

        &[data-codeword-slot]:not(:empty) {
            border-color: var(--codeword-board-typed);
        }

        &.codeword-board__tile--correct {
            background-color: var(--codeword-board-correct);
            border-color: var(--codeword-board-correct);
            color: var(--codeword-board-correct-label);
        }

        &.codeword-board__tile--present {
            border: 0.1875rem solid var(--codeword-board-present);
        }

        &.codeword-board__tile--absent {
            background-color: var(--codeword-board-absent);
            border-color: var(--codeword-board-absent);
            color: var(--codeword-board-absent-label);
        }
    }

    .codeword-board__answer {
        font-weight: 600;
        margin-block: 0.5rem 0;
        text-align: center;
    }
}