@layer components {
    :root {
        --molehills-controls-count: var(--secondary-label);
    }

    .molehills-controls {
        display: grid;
        gap: 0.5rem;
    }

    .molehills-controls__count {
        color: var(--molehills-controls-count);
        font-variant-numeric: tabular-nums;
        margin: 0;
        text-align: center;
    }

    .molehills-controls__modes {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .molehills-controls__mode {
        inline-size: 100%;
        min-block-size: 3.25rem;
    }
}