:where(.c-page-control) {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--theme-borderRadius-full, var(--theme-borderRadius-full--sm));
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceVariantStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceVariantMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceVariantSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceVariantDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceVariantDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceVariantInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceVariantInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceVariantInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceVariantOnIndent);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceVariantOnIndentActive);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceVariantOnIndentHover);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceVariantIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceVariantIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceVariantStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceVariantMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceVariantSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceVariantDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceVariantDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceVariantInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceVariantOnIndent);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentActive);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentHover);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceVariantExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceVariantStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceVariantMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceVariantSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceVariantDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceVariantInteractive);
    --un-text-opacity: 1;
    color: rgb(var(--theme-colors-text-interactive-on-X) / var(--un-text-opacity))
}

    :where(.c-page-control):hover {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceVariantHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceVariantHover) / var(--un-bg-opacity))
    }

    :where(.c-page-control):active {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceVariantActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceVariantActive) / var(--un-bg-opacity))
    }

    :where(.c-page-control):not(:active) {
        transition-property: color;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
        transition-duration: .15s;
        transition-duration: .1s
    }

    :where(.c-page-control):disabled, :where(.c-page-control):where([aria-disabled=true i]) {
        opacity: .35
    }

        :where(.c-page-control):disabled:hover, :where(.c-page-control):where([aria-disabled=true i]):hover {
            --un-bg-opacity: 1;
            background-color: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
            --bgCurrent: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
            --theme-colors-strong-on-X: var(--theme-colors-onSurfaceVariantStrong);
            --theme-colors-medium-on-X: var(--theme-colors-onSurfaceVariantMedium);
            --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceVariantSubtle);
            --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceVariantDisabled);
            --theme-colors-danger-on-X: var(--theme-colors-onSurfaceVariantDanger);
            --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceVariantInteractive);
            --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceVariantInteractiveHover);
            --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceVariantInteractiveActive);
            --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceVariantOnIndent);
            --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceVariantOnIndentActive);
            --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceVariantOnIndentHover);
            --theme-colors-indent-on-X: var(--theme-colors-onSurfaceVariantIndent);
            --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceVariantIndentActive);
            --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceVariantStrong);
            --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceVariantMedium);
            --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceVariantSubtle);
            --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceVariantDisabled);
            --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceVariantDanger);
            --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceVariantInteractive);
            --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveHover);
            --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveActive);
            --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceVariantOnIndent);
            --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentActive);
            --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentHover);
            --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceVariantExtraStrong);
            --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceVariantStrong);
            --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceVariantMedium);
            --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceVariantSubtle);
            --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceVariantDanger);
            --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceVariantInteractive)
        }

        :where(.c-page-control):disabled:active, :where(.c-page-control):where([aria-disabled=true i]):active {
            --un-bg-opacity: 1;
            background-color: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
            --bgCurrent: rgb(var(--theme-colors-background-surfaceVariant) / var(--un-bg-opacity));
            --theme-colors-strong-on-X: var(--theme-colors-onSurfaceVariantStrong);
            --theme-colors-medium-on-X: var(--theme-colors-onSurfaceVariantMedium);
            --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceVariantSubtle);
            --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceVariantDisabled);
            --theme-colors-danger-on-X: var(--theme-colors-onSurfaceVariantDanger);
            --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceVariantInteractive);
            --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceVariantInteractiveHover);
            --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceVariantInteractiveActive);
            --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceVariantOnIndent);
            --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceVariantOnIndentActive);
            --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceVariantOnIndentHover);
            --theme-colors-indent-on-X: var(--theme-colors-onSurfaceVariantIndent);
            --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceVariantIndentActive);
            --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceVariantStrong);
            --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceVariantMedium);
            --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceVariantSubtle);
            --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceVariantDisabled);
            --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceVariantDanger);
            --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceVariantInteractive);
            --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveHover);
            --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceVariantInteractiveActive);
            --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceVariantOnIndent);
            --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentActive);
            --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceVariantOnIndentHover);
            --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceVariantExtraStrong);
            --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceVariantStrong);
            --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceVariantMedium);
            --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceVariantSubtle);
            --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceVariantDanger);
            --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceVariantInteractive)
        }