@layer components {
    :root {
        --five-dice-card-name: var(--label);
        --five-dice-card-offer: var(--tint);
        --five-dice-card-zero: var(--tertiary-label);
        --five-dice-card-empty: var(--tertiary-label);
        --five-dice-card-filled: var(--label);
        --five-dice-card-total: var(--label);
    }

    .five-dice-card {
        inline-size: min(100%, 32rem);
    }

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

    .five-dice-card__option {
        gap: 0.5rem;
        inline-size: 100%;
        min-block-size: 2.75rem;
    }

    .five-dice-card__name {
        color: var(--five-dice-card-name);
        flex: 1 1 auto;
    }

    .five-dice-card__offer {
        color: var(--five-dice-card-offer);
        font-variant-numeric: tabular-nums;
        font-weight: 600;

        &.five-dice-card__offer--zero {
            color: var(--five-dice-card-zero);
            font-weight: 400;
        }
    }

    .five-dice-card__total {
        font-weight: 700;
    }

    .five-dice-card .five-dice-card__value {
        font-variant-numeric: tabular-nums;

        &.five-dice-card__value--filled {
            color: var(--five-dice-card-filled);
            font-weight: 600;
        }

        &.five-dice-card__value--empty {
            color: var(--five-dice-card-empty);
        }

        &.five-dice-card__value--total {
            color: var(--five-dice-card-total);
        }
    }
}