@layer components {
    :root {
        --liars-dice-bid-light: oklch(1 0 0);
        --liars-dice-bid-shade: oklch(0 0 0);
        --liars-dice-bid-ivory: oklch(0.97 0.02 88);
        --liars-dice-bid-ink: oklch(0.25 0.02 60);
        --liars-dice-bid-chosen: var(--tint);
        --liars-dice-bid-status: var(--secondary-label);
        --liars-dice-bid-field: var(--secondary-system-grouped-background);
        --liars-dice-bid-pressed: var(--tertiary-system-grouped-background);
        --liars-dice-bid-edge: var(--opaque-separator);
        --liars-dice-bid-text: var(--label);
        --liars-dice-bid-step: var(--tint);
        --liars-dice-bid-off: var(--tertiary-label);
    }

    .liars-dice-bid {
        display: grid;
        gap: 0.625rem;
        justify-items: center;

        &:has(.liars-dice-bid__form[data-pending]) .liars-dice-bid__actions {
            opacity: 0.6;
        }
    }

    .liars-dice-bid__form {
        display: grid;
        gap: 0.625rem;
        inline-size: 100%;
        justify-items: center;
    }

    .liars-dice-bid__status {
        color: var(--liars-dice-bid-status);
        font-size: 0.9375rem;
        font-variant-numeric: tabular-nums;
        margin: 0;
        text-align: center;
    }

    .liars-dice-bid__quantity {
        display: grid;
        gap: 0.625rem;
        grid-template-areas: "less value more";
        grid-template-columns: 3.25rem 1fr 3.25rem;
        inline-size: min(100%, 24rem);
        position: relative;
    }

    .liars-dice-bid__count {
        block-size: 0.0625rem;
        clip-path: inset(50%);
        inline-size: 0.0625rem;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        margin: 0;
        overflow: hidden;
        position: absolute;

        &:checked {
            & + .liars-dice-bid__step {
                display: grid;
                grid-area: less;
            }

            & + .liars-dice-bid__step + .liars-dice-bid__step {
                display: grid;
                grid-area: more;
            }

            &
                + .liars-dice-bid__step
                + .liars-dice-bid__step
                + .liars-dice-bid__value {
                display: grid;
                grid-area: value;
            }
        }

        &:focus-visible
            + .liars-dice-bid__step
            + .liars-dice-bid__step
            + .liars-dice-bid__value {
            outline: 0.1875rem solid var(--liars-dice-bid-chosen);
            outline-offset: 0.125rem;
        }
    }

    .liars-dice-bid__step,
    .liars-dice-bid__value {
        background: var(--liars-dice-bid-field);
        border: 0.0625rem solid var(--liars-dice-bid-edge);
        border-radius: 0.875rem;
        box-sizing: border-box;
        display: none;
        min-block-size: 3.25rem;
        place-items: center;
        user-select: none;
    }

    .liars-dice-bid__step {
        color: var(--liars-dice-bid-step);
        cursor: pointer;
        font-size: 1.625rem;
        font-weight: 500;
        transition:
            background 120ms ease,
            scale 120ms ease;

        &:active {
            background: var(--liars-dice-bid-pressed);
            scale: 0.94;
        }

        &.liars-dice-bid__step--disabled {
            color: var(--liars-dice-bid-off);
            cursor: default;

            &:active {
                background: var(--liars-dice-bid-field);
                scale: 1;
            }
        }
    }

    .liars-dice-bid__value {
        color: var(--liars-dice-bid-text);
        font-size: 1.75rem;
        font-variant-numeric: tabular-nums;
        font-weight: 800;

        &.liars-dice-bid__value--none {
            color: var(--liars-dice-bid-off);
            display: grid;
            grid-area: value;
        }
    }

    .liars-dice-bid__faces {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(6, 1fr);
        inline-size: min(100%, 24rem);
    }

    .liars-dice-bid__face {
        aspect-ratio: 1;
        cursor: pointer;
        display: grid;
        min-block-size: 2.75rem;
        position: relative;
        transition: opacity 160ms ease;

        &:active .liars-dice-bid__die {
            scale: 0.92;
        }
    }

    .liars-dice-bid:has(.liars-dice-bid__count--floor:checked)
        .liars-dice-bid__face--below {
        opacity: 0.3;
        pointer-events: none;
    }

    .liars-dice-bid__radio {
        block-size: 100%;
        cursor: pointer;
        inline-size: 100%;
        inset: 0;
        margin: 0;
        opacity: 0;
        position: absolute;
        z-index: 1;

        &:checked + .liars-dice-bid__die {
            box-shadow:
                0 0 0 0.1875rem var(--liars-dice-bid-chosen),
                0 0.5rem 0.875rem -0.25rem
                    color-mix(
                        in oklch,
                        var(--liars-dice-bid-shade) 45%,
                        transparent
                    );
            translate: 0 -0.1875rem;
        }

        &:disabled {
            cursor: not-allowed;

            & + .liars-dice-bid__die {
                opacity: 0.3;
            }
        }

        &:focus-visible + .liars-dice-bid__die {
            outline: 0.1875rem solid var(--liars-dice-bid-chosen);
            outline-offset: 0.25rem;
        }
    }

    .liars-dice-bid__die {
        aspect-ratio: 1;
        background:
            radial-gradient(
                circle at 28% 22%,
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-ivory),
                    var(--liars-dice-bid-light) 45%
                ),
                transparent 55%
            ),
            linear-gradient(
                155deg,
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-ivory),
                    var(--liars-dice-bid-light) 10%
                ),
                var(--liars-dice-bid-ivory) 45%,
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-ivory),
                    var(--liars-dice-bid-shade) 16%
                )
            );
        border-radius: 24%;
        box-shadow:
            inset 0 -0.125rem 0.125rem
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-shade) 22%,
                    transparent
                ),
            inset 0 0.0625rem 0.0625rem
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-light) 75%,
                    transparent
                ),
            0 0 0 0.0625rem
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-shade) 10%,
                    transparent
                ),
            0 0.25rem 0.5rem -0.125rem
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-shade) 35%,
                    transparent
                );
        box-sizing: border-box;
        display: grid;
        grid-template: repeat(3, 1fr) / repeat(3, 1fr);
        inline-size: 100%;
        padding: 15%;
        transition:
            box-shadow 160ms ease,
            opacity 160ms ease,
            scale 120ms ease,
            translate 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .liars-dice-bid__pip {
        aspect-ratio: 1;
        background: radial-gradient(
            circle at 50% 38%,
            color-mix(
                in oklch,
                var(--liars-dice-bid-ink),
                var(--liars-dice-bid-shade) 38%
            ),
            var(--liars-dice-bid-ink) 78%
        );
        border-radius: 50%;
        box-shadow:
            inset 0 0.0625rem 0.0625rem
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-shade) 45%,
                    transparent
                ),
            0 0.0625rem 0
                color-mix(
                    in oklch,
                    var(--liars-dice-bid-light) 50%,
                    transparent
                );
        margin: 13%;

        &.liars-dice-bid__pip--tl {
            grid-area: 1 / 1;
        }

        &.liars-dice-bid__pip--tr {
            grid-area: 1 / 3;
        }

        &.liars-dice-bid__pip--ml {
            grid-area: 2 / 1;
        }

        &.liars-dice-bid__pip--c {
            grid-area: 2 / 2;
        }

        &.liars-dice-bid__pip--mr {
            grid-area: 2 / 3;
        }

        &.liars-dice-bid__pip--bl {
            grid-area: 3 / 1;
        }

        &.liars-dice-bid__pip--br {
            grid-area: 3 / 3;
        }
    }

    .liars-dice-bid__actions {
        display: grid;
        gap: 0.625rem;
        grid-template-columns: 1fr 1fr;
        inline-size: min(100%, 24rem);
        transition: opacity 120ms ease;
    }

    .liars-dice-bid__button {
        inline-size: 100%;
        min-block-size: 3.25rem;
    }
}