@layer components {
    :root {
        --cipher-keyboard-face: var(--tertiary-system-background);
        --cipher-keyboard-face-special: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 84%,
                var(--label)
            ),
            color-mix(
                in oklch,
                var(--tertiary-system-background) 62%,
                var(--system-background)
            )
        );
        --cipher-keyboard-sheen: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 75%,
                transparent
            ),
            color-mix(in oklch, var(--label) 8%, transparent)
        );
        --cipher-keyboard-highlight: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 90%,
                transparent
            ),
            color-mix(in oklch, var(--label) 12%, transparent)
        );
        --cipher-keyboard-edge: light-dark(
            color-mix(in oklch, var(--label) 24%, transparent),
            color-mix(in oklch, var(--system-background) 90%, transparent)
        );
        --cipher-keyboard-shadow: light-dark(
            color-mix(in oklch, var(--label) 10%, transparent),
            color-mix(in oklch, var(--system-background) 60%, transparent)
        );
        --cipher-keyboard-pressed: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 86%,
                var(--label)
            ),
            color-mix(
                in oklch,
                var(--tertiary-system-background) 82%,
                var(--label)
            )
        );
        --cipher-keyboard-label: var(--label);
        --cipher-keyboard-current: var(--tint);
        --cipher-keyboard-current-label: var(--tint-label);
        --cipher-keyboard-used: var(--tertiary-label);
        --cipher-keyboard-used-face: light-dark(
            color-mix(
                in oklch,
                var(--tertiary-system-background) 55%,
                transparent
            ),
            color-mix(
                in oklch,
                var(--tertiary-system-background) 50%,
                transparent
            )
        );
        --cipher-keyboard-disabled: var(--quaternary-label);
        --cipher-keyboard-disabled-face: var(--quaternary-system-fill);
        --cipher-keyboard-status: var(--secondary-label);
        --cipher-keyboard-action: var(--tint);
    }

    .cipher-keyboard {
        --cipher-keyboard-columns: 10;
        --cipher-keyboard-gap: 0.3125rem;

        display: grid;
        gap: 0.5rem;
        inline-size: 100%;
        margin-inline: auto;
        max-inline-size: 32rem;

        &.cipher-keyboard--columns-11 {
            --cipher-keyboard-columns: 11;
        }

        &:has(.cipher-keyboard__actions[data-pending])
            .cipher-keyboard__action {
            cursor: progress;
            opacity: 0.6;
        }
    }

    .cipher-keyboard__bar {
        align-items: center;
        display: grid;
        gap: 0.5rem;
        grid-template-columns: auto 1fr auto;
        min-block-size: 2.75rem;
    }

    .cipher-keyboard__status {
        color: var(--cipher-keyboard-status);
        font-size: 0.8125rem;
        font-weight: 500;
        line-height: 1.25;
        margin: 0;
        text-align: center;
        text-wrap: balance;
    }

    .cipher-keyboard__action,
    .cipher-keyboard__key {
        --cipher-keyboard-lift:
            0 0.0625rem 0 var(--cipher-keyboard-edge),
            0 0.0625rem 0.25rem var(--cipher-keyboard-shadow);

        align-items: center;
        background-color: var(--cipher-keyboard-face);
        background-image: linear-gradient(
            var(--cipher-keyboard-sheen),
            transparent 75%
        );
        box-shadow:
            inset 0 0.0625rem 0 var(--cipher-keyboard-highlight),
            var(--cipher-keyboard-lift);
        color: var(--cipher-keyboard-label);
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        touch-action: manipulation;
        transition:
            background-color 120ms ease,
            box-shadow 120ms ease,
            color 120ms ease,
            opacity 120ms ease,
            translate 80ms ease;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;

        & svg {
            block-size: 1.375rem;
            flex: none;
            inline-size: 1.375rem;
        }

        &:active:not(:disabled),
        &.cipher-keyboard__key--pressed {
            --cipher-keyboard-lift: 0 0 0 transparent;

            background-color: var(--cipher-keyboard-pressed);
            translate: 0 0.0625rem;
        }

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

        &:disabled {
            --cipher-keyboard-lift: 0 0 0 transparent;

            background-color: var(--cipher-keyboard-disabled-face);
            background-image: none;
            box-shadow: none;
            color: var(--cipher-keyboard-disabled);
            cursor: default;
        }
    }

    .cipher-keyboard__action {
        block-size: 2.75rem;
        border-radius: 1.375rem;
        color: var(--cipher-keyboard-action);
        font-size: 0.9375rem;
        font-weight: 600;
        gap: 0.375rem;
        padding-inline: 0.75rem 1rem;

        & svg {
            block-size: 1.25rem;
            inline-size: 1.25rem;
        }
    }

    .cipher-keyboard__caption {
        line-height: 1;
    }

    .cipher-keyboard__letters {
        display: grid;
        gap: 0.5rem;
    }

    .cipher-keyboard__actions {
        display: none;
    }

    .cipher-keyboard__row {
        display: flex;
        gap: var(--cipher-keyboard-gap);
        justify-content: center;
    }

    .cipher-keyboard__key {
        --cipher-keyboard-key: calc(
            (
                    100% - (var(--cipher-keyboard-columns) - 1) *
                        var(--cipher-keyboard-gap)
                ) /
                var(--cipher-keyboard-columns)
        );

        block-size: 2.875rem;
        border-radius: 0.4375rem;
        flex: 0 1 var(--cipher-keyboard-key);
        font-size: 1.1875rem;
        font-weight: 500;
        min-inline-size: 0;
        padding: 0;

        &.cipher-keyboard__key--wide {
            background-color: var(--cipher-keyboard-face-special);
            flex-basis: calc(
                var(--cipher-keyboard-key) * 1.6 + var(--cipher-keyboard-gap)
            );
        }

        &.cipher-keyboard__key--used {
            --cipher-keyboard-lift: 0 0 0 transparent;

            background-color: var(--cipher-keyboard-used-face);
            background-image: none;
            box-shadow: inset 0 0 0 0.0625rem var(--cipher-keyboard-edge);
            color: var(--cipher-keyboard-used);
        }

        &.cipher-keyboard__key--current {
            background-color: var(--cipher-keyboard-current);
            background-image: none;
            color: var(--cipher-keyboard-current-label);
            font-weight: 700;
        }

        &:disabled {
            background-color: var(--cipher-keyboard-disabled-face);
            background-image: none;
            box-shadow: none;
            color: var(--cipher-keyboard-disabled);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .cipher-keyboard__action,
        .cipher-keyboard__key {
            transition: none;
        }
    }
}