@layer components {
    :root {
        --sudoku-pad-done: var(--tertiary-label);
    }

    .sudoku-pad {
        display: grid;
        gap: 0.5rem;
    }

    .sudoku-pad__digits {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(5, 1fr);
    }

    .sudoku-pad__digit {
        font-size: 1.375rem;
        font-variant-numeric: tabular-nums;
        inline-size: 100%;
        min-block-size: 3.25rem;

        &.sudoku-pad__digit--done {
            color: var(--sudoku-pad-done);
        }
    }

    .sudoku-pad__hint {
        display: grid;
    }

    .sudoku-pad__hint-button {
        inline-size: 100%;
        min-block-size: 3rem;
    }
}