@layer components {
    :root {
        --add-it-up-board-paper: var(--secondary-system-grouped-background);
        --add-it-up-board-line: var(--separator);
        --add-it-up-board-rule: var(--opaque-separator);
        --add-it-up-board-number: var(--label);
        --add-it-up-board-struck: var(--tertiary-label);
        --add-it-up-board-total: var(--secondary-label);
        --add-it-up-board-matched: var(--tint);
        --add-it-up-board-matched-background: color-mix(
            in oklch,
            var(--tint) 10%,
            var(--add-it-up-board-paper)
        );
        --add-it-up-board-pressed: color-mix(
            in oklch,
            var(--label) 6%,
            var(--add-it-up-board-paper)
        );
    }

    .add-it-up-board {
        background-color: var(--add-it-up-board-paper);
        border-collapse: collapse;
        border-radius: 0.75rem;
        font-variant-numeric: tabular-nums;
        inline-size: min(100%, 26rem);
        overflow: hidden;
        table-layout: fixed;
        user-select: none;

        &.add-it-up-board--size-4 {
            inline-size: min(100%, 20rem);
        }

        &.add-it-up-board--size-6 {
            inline-size: min(100%, 24rem);
        }

        &.add-it-up-board--size-8 {
            inline-size: min(100%, 28rem);
        }
    }

    .add-it-up-board__cell {
        border-block-end: 0.0625rem solid var(--add-it-up-board-line);
        border-inline-end: 0.0625rem solid var(--add-it-up-board-line);
        padding: 0;
    }

    .add-it-up-board__form {
        display: grid;
    }

    .add-it-up-board__number {
        align-items: center;
        aspect-ratio: 1;
        background: none;
        border: none;
        color: var(--add-it-up-board-number);
        display: flex;
        font: inherit;
        font-size: 1.25rem;
        font-variant-numeric: tabular-nums;
        inline-size: 100%;
        justify-content: center;
        min-block-size: 2.5rem;
        padding: 0;
        -webkit-tap-highlight-color: transparent;

        &:active {
            background-color: var(--add-it-up-board-pressed);
        }

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

        &.add-it-up-board__number--struck {
            color: var(--add-it-up-board-struck);
            text-decoration: line-through 0.125rem;
        }
    }

    .add-it-up-board__total {
        color: var(--add-it-up-board-total);
        font-size: 1rem;
        font-weight: 600;
        padding: 0.25rem;
        text-align: center;

        &.add-it-up-board__total--row {
            border-block-end: 0.0625rem solid var(--add-it-up-board-line);
            border-inline-start: 0.125rem solid var(--add-it-up-board-rule);
            inline-size: 2.75rem;
        }

        &.add-it-up-board__total--col {
            block-size: 2.75rem;
            border-block-start: 0.125rem solid var(--add-it-up-board-rule);
            border-inline-end: 0.0625rem solid var(--add-it-up-board-line);
        }

        &.add-it-up-board__total--matched {
            background-color: var(--add-it-up-board-matched-background);
            color: var(--add-it-up-board-matched);
        }
    }

    .add-it-up-board__corner {
        border-block-start: 0.125rem solid var(--add-it-up-board-rule);
        border-inline-start: 0.125rem solid var(--add-it-up-board-rule);
    }
}