@layer components {
    :root {
        --cross-sums-pad-used: var(--tertiary-label);
        --cross-sums-pad-status: var(--secondary-label);
        --cross-sums-pad-sum: var(--label);
        --cross-sums-pad-right: color-mix(
            in oklab,
            var(--system-teal) 72%,
            var(--label)
        );
        --cross-sums-pad-broken: light-dark(
            oklch(0.55 0.2 27),
            oklch(0.72 0.17 27)
        );
        --cross-sums-pad-active: var(--tint);
    }

    .cross-sums-pad {
        display: grid;
        gap: 0.5rem;
    }

    .cross-sums-pad__bar {
        align-items: center;
        display: flex;
        gap: 0.75rem;
    }

    .cross-sums-pad__status {
        color: var(--cross-sums-pad-status);
        flex: 1;
        font-size: 0.875rem;
        line-height: 1.35;
        margin: 0;
        min-inline-size: 0;

        &.cross-sums-pad__status--broken {
            color: var(--cross-sums-pad-broken);
            font-weight: 600;
        }
    }

    .cross-sums-pad__run {
        display: block;
    }

    .cross-sums-pad__sum {
        color: var(--cross-sums-pad-sum);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
    }

    .cross-sums-pad__note {
        font-weight: 600;

        &.cross-sums-pad__note--right {
            color: var(--cross-sums-pad-right);
        }

        &.cross-sums-pad__note--wrong {
            color: var(--cross-sums-pad-broken);
        }
    }

    .cross-sums-pad__check {
        display: grid;
        flex: none;
    }

    .cross-sums-pad__check-button {
        min-inline-size: 4.5rem;
    }

    .cross-sums-pad__move {
        display: none;
    }

    .cross-sums-pad__digits {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cross-sums-pad__digit {
        inline-size: 100%;

        &.cross-sums-pad__digit--used {
            color: var(--cross-sums-pad-used);
        }

        &.cross-sums-pad__digit--active {
            font-weight: 800;
            outline: 0.125rem solid var(--cross-sums-pad-active);
            outline-offset: -0.125rem;
        }
    }

    .cross-sums-pad__key {
        font-size: 1.375rem;
        font-variant-numeric: tabular-nums;
    }
}