@layer components {
    :root {
        --five-dice-tray-body: light-dark(oklch(0.995 0.004 85), oklch(0.3 0.02 50));
        --five-dice-tray-edge: var(--opaque-separator);
        --five-dice-tray-pip: var(--label);
        --five-dice-tray-held-body: color-mix(in oklch, var(--tint) 20%, var(--five-dice-tray-body));
        --five-dice-tray-held-edge: var(--tint);
        --five-dice-tray-status: var(--secondary-label);
    }

    .five-dice-tray {
        display: grid;
        gap: 0.75rem;
        justify-items: center;
    }

    .five-dice-tray__status {
        color: var(--five-dice-tray-status);
        font-size: 0.9375rem;
        font-variant-numeric: tabular-nums;
        margin: 0;
    }

    .five-dice-tray__dice {
        display: grid;
        gap: 0.625rem;
        grid-template-columns: repeat(5, 1fr);
        inline-size: min(100%, 24rem);
        padding-block-start: 0.375rem;
    }

    .five-dice-tray__die {
        --five-dice-tray-die-body: var(--five-dice-tray-body);
        --five-dice-tray-die-edge: var(--five-dice-tray-edge);
        --five-dice-tray-die-edge-width: 3;

        aspect-ratio: 1;
        border-radius: 0.875rem;
        display: grid;
        min-block-size: 3rem;
        position: relative;
        transition: translate 0.15s ease-out;
        -webkit-tap-highlight-color: transparent;

        &::after {
            background: transparent;
            block-size: 0.25rem;
            border-radius: 0.125rem;
            content: "";
            inset-block-end: -0.625rem;
            inset-inline: 25%;
            position: absolute;
        }

        &.five-dice-tray__die--held {
            --five-dice-tray-die-body: var(--five-dice-tray-held-body);
            --five-dice-tray-die-edge: var(--five-dice-tray-held-edge);
            --five-dice-tray-die-edge-width: 6;

            translate: 0 -0.375rem;

            &::after {
                background: var(--five-dice-tray-held-edge);
            }
        }

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

    .five-dice-tray__face {
        block-size: 100%;
        inline-size: 100%;
    }

    .five-dice-tray__body {
        fill: var(--five-dice-tray-die-body);
        stroke: var(--five-dice-tray-die-edge);
        stroke-width: var(--five-dice-tray-die-edge-width);
    }

    .five-dice-tray__pip {
        fill: var(--five-dice-tray-pip);
    }

    .five-dice-tray__roll {
        display: grid;
        inline-size: min(100%, 24rem);
    }

    .five-dice-tray__roll-button {
        inline-size: 100%;
        min-block-size: 3.25rem;
    }

    @media (prefers-reduced-motion: reduce) {
        .five-dice-tray__die {
            transition: none;
        }
    }
}