.hcg-container {
    /* ─────────────────────────────────────────────────────────────
     Defaults (internal base tokens)
     ───────────────────────────────────────────────────────────── */
    --ig-button-border-width-base: var(--hcg-button-border-width, 1px);
    --ig-button-border-style-base: var(--hcg-button-border-style, solid);
    --ig-button-border-color-base: var(--hcg-button-border-color, currentColor);
    --ig-button-border-radius-base: var(--hcg-button-border-radius, 0);
    --ig-button-background-base: var(--hcg-button-background, transparent);
    --ig-button-padding-base: var(--hcg-button-padding, 6px);
    --ig-button-color-base: var(--hcg-button-color, inherit);
    --ig-button-hover-color-base: var(--hcg-button-hover-color, var(--ig-default-background));
    --ig-button-hover-background-base: var(--hcg-button-hover-background, var(--ig-default-color));
    --ig-button-hover-border-color-base: var(--hcg-button-hover-border-color, var(--ig-button-border-color-base));
    --ig-button-selected-color-base: var(--hcg-button-selected-color, var(--ig-default-background));
    --ig-button-selected-background-base: var(--hcg-button-selected-background, var(--ig-default-color));
    --ig-button-selected-border-color-base: var(--hcg-button-selected-border-color, var(--ig-button-border-color));

    /* ─────────────────────────────────────────────────────────────
     Public theme overrides (external hcg tokens)
     ───────────────────────────────────────────────────────────── */
    --ig-button-border-width: var(--hcg-button-border-width, var(--ig-button-border-width-base));
    --ig-button-border-style: var(--hcg-button-border-style, var(--ig-button-border-style-base));
    --ig-button-border-color: var(--hcg-button-border-color, var(--ig-button-border-color-base));
    --ig-button-border-radius: var(--hcg-button-border-radius, var(--ig-button-border-radius-base));
    --ig-button-background: var(--hcg-button-background, var(--ig-button-background-base));
    --ig-button-padding: var(--hcg-button-padding, var(--ig-button-padding-base));
    --ig-button-font-weight: var(--hcg-button-font-weight, inherit);
    --ig-button-font-size: var(--hcg-button-font-size, inherit);
    --ig-button-font-family: var(--hcg-button-font-family, inherit);
    --ig-button-color: var(--hcg-button-color, var(--ig-button-color-base));
    --ig-button-hover-color: var(--hcg-button-hover-color, var(--ig-button-hover-color-base));
    --ig-button-hover-background: var(--hcg-button-hover-background, var(--ig-button-hover-background-base));
    --ig-button-hover-border-color: var(--hcg-button-hover-border-color, var(--ig-button-hover-border-color-base));
    --ig-button-selected-color: var(--hcg-button-selected-color, var(--ig-button-selected-color-base));
    --ig-button-selected-background: var(--hcg-button-selected-background, var(--ig-button-selected-background-base));
    --ig-button-selected-border-color: var(--hcg-button-selected-border-color, var(--ig-button-selected-border-color-base));
    --ig-button-focus-ring: 0 0 0 var(--ig-focus-ring-width) var(--ig-focus-ring-color);

    tbody :where(.hcg-cell) {
        --ig-button-background: var(--hcg-cell-button-background, var(--ig-button-background-base));
        --ig-button-color: var(--hcg-cell-button-color, var(--ig-button-color-base));
        --ig-button-border-width: var(--hcg-cell-button-border-width, var(--ig-button-border-width-base));
        --ig-button-border-style: var(--hcg-cell-button-border-style, var(--ig-button-border-style-base));
        --ig-button-border-color: var(--hcg-cell-button-border-color, var(--ig-button-border-color-base));
        --ig-button-border-radius: var(--hcg-cell-button-border-radius, var(--ig-button-border-radius-base));
        --ig-button-padding: var(--hcg-cell-button-padding, var(--ig-button-padding-base));
        --ig-button-font-weight: var(--hcg-cell-button-font-weight, var(--hcg-button-font-weight, inherit));
        --ig-button-font-size: var(--hcg-cell-button-font-size, var(--hcg-button-font-size, inherit));
        --ig-button-font-family: var(--hcg-cell-button-font-family, var(--hcg-button-font-family, inherit));
        --ig-button-hover-color: var(--hcg-cell-button-hover-color, var(--hcg-button-hover-color, var(--hcg-cell-button-color, var(--ig-button-hover-color-base))));
        --ig-button-hover-background: var(--hcg-cell-button-hover-background, var(--hcg-button-hover-background, var(--hcg-cell-button-background, var(--ig-button-hover-background-base))));
        --ig-button-hover-border-color: var(--hcg-cell-button-hover-border-color, var(--hcg-button-hover-border-color, var(--hcg-cell-button-border-color, var(--ig-button-hover-border-color-base))));
        --ig-button-selected-color: var(--hcg-cell-button-selected-color, var(--ig-button-selected-color-base));
        --ig-button-selected-background: var(--hcg-cell-button-selected-background, var(--ig-button-selected-background-base));
        --ig-button-selected-border-color: var(--hcg-cell-button-selected-border-color, var(--ig-button-selected-border-color-base));
    }

    .hcg-pagination {
        --ig-button-background: var(--hcg-pagination-button-background, var(--ig-button-background-base));
        --ig-button-color: var(--hcg-pagination-button-color, var(--ig-button-color-base));
        --ig-button-border-width: var(--hcg-pagination-button-border-width, var(--ig-button-border-width-base));
        --ig-button-border-style: var(--hcg-pagination-button-border-style, var(--ig-button-border-style-base));
        --ig-button-border-color: var(--hcg-pagination-button-border-color, var(--ig-button-border-color-base));
        --ig-button-border-radius: var(--hcg-pagination-button-border-radius, var(--ig-button-border-radius-base));
        --ig-button-padding: var(--hcg-pagination-button-padding, var(--ig-button-padding-base));
        --ig-button-font-weight: var(--hcg-pagination-button-font-weight, var(--hcg-button-font-weight, inherit));
        --ig-button-font-size: var(--hcg-pagination-button-font-size, var(--hcg-button-font-size, inherit));
        --ig-button-font-family: var(--hcg-pagination-button-font-family, var(--hcg-button-font-family, inherit));
        --ig-button-hover-color: var(--hcg-pagination-button-hover-color, var(--hcg-button-hover-color, var(--hcg-pagination-button-color, var(--ig-button-hover-color-base))));
        --ig-button-hover-background: var(--hcg-pagination-button-hover-background, var(--hcg-button-hover-background, var(--hcg-pagination-button-background, var(--ig-button-hover-background-base))));
        --ig-button-hover-border-color: var(--hcg-pagination-button-hover-border-color, var(--hcg-button-hover-border-color, var(--hcg-pagination-button-border-color, var(--ig-button-hover-border-color-base))));
        --ig-button-selected-color: var(--hcg-pagination-button-selected-color, var(--ig-button-selected-color-base));
        --ig-button-selected-background: var(--hcg-pagination-button-selected-background, var(--ig-button-selected-background-base));
        --ig-button-selected-border-color: var(--hcg-pagination-button-selected-border-color, var(--ig-button-selected-border-color-base));
    }

    :where(.hcg-button) {
        font-weight: var(--ig-button-font-weight);
        font-size: var(--ig-button-font-size);
        font-family: var(--ig-button-font-family);
        color: var(--ig-button-color);
        background: var(--ig-button-background);
        padding-block: var(--ig-button-padding);
        padding-inline: var(--ig-button-padding);
        min-height: calc(1em + (2 * var(--ig-button-padding)));
        border-width: var(--ig-button-border-width);
        border-style: var(--ig-button-border-style);
        border-color: var(--ig-button-border-color);
        border-radius: var(--ig-button-border-radius);

        &.hcg-button-selected,
        &.hcg-button-selected:hover:not(thead th *) {
            color: var(--ig-button-selected-color);
            background: var(--ig-button-selected-background);
            border-color: var(--ig-button-selected-border-color);
        }

        &.hcg-button-selected::after {
            background: var(--ig-button-selected-color);
        }

        &.hcg-button-selected:hover::after {
            background: var(--ig-button-hover-color);
        }

        &:hover:not(:disabled) {
            color: var(--ig-button-hover-color);
            background: var(--ig-button-hover-background);
            border-color: var(--ig-button-hover-border-color);
        }

        &:focus-visible {
            box-shadow: var(--ig-button-focus-ring);
        }
    }
}