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

    .codeword-keyboard {
        display: grid;
        gap: 0.5rem;
        margin-inline: auto;
        max-inline-size: 32rem;
    }

    .codeword-keyboard__row {
        display: flex;
        gap: 0.25rem;
        justify-content: center;
    }

    .codeword-keyboard__key {
        border-radius: 0.5rem;
        color: var(--codeword-keyboard-label);
        flex: 1 1 0;
        font-size: 1.125rem;
        height: 3.25rem;
        max-inline-size: 2.875rem;
        min-inline-size: 0;
        padding-inline: 0;
        text-decoration: none;
        text-transform: uppercase;
        -webkit-tap-highlight-color: transparent;

        &.codeword-keyboard__key--wide {
            flex: 1.6 1 0;
            font-size: 0.9375rem;
            inline-size: 100%;
            max-inline-size: 4.75rem;
            text-transform: none;
        }

        &.codeword-keyboard__key--correct {
            --button-hover-bg: var(--codeword-keyboard-correct);
            --button-pressed-bg: var(--codeword-keyboard-correct);

            background-color: var(--codeword-keyboard-correct);
            color: var(--codeword-keyboard-correct-label);
        }

        &.codeword-keyboard__key--present {
            box-shadow: inset 0 0 0 0.1875rem var(--codeword-keyboard-present);
        }

        &.codeword-keyboard__key--absent {
            --button-hover-bg: var(--codeword-keyboard-absent);
            --button-pressed-bg: var(--codeword-keyboard-absent);

            background-color: var(--codeword-keyboard-absent);
            color: var(--codeword-keyboard-absent-label);
        }
    }

    .codeword-keyboard__enter {
        display: flex;
        flex: 1.6 1 0;
        max-inline-size: 4.75rem;
    }
}