:where(.c-base-cta-button) {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    --un-text-opacity: 1;
    color: rgb(var(--theme-colors-text-interactive-on-X) / var(--un-text-opacity));
    gap: var(--theme-spacing-3xs, var(--theme-spacing-3xs--sm));
    padding: var(--theme-spacing-cardInset, var(--theme-spacing-cardInset--sm));
    font-size: var(--theme-fontSize-body-lg-strong);
    font-family: var(--theme-fontFamily-body-lg-strong);
    font-weight: var(--theme-fontWeight-body-lg-strong);
    font-style: var(--theme-fontStyle-body-lg-strong);
    line-height: var(--theme-lineHeight-body-lg-strong);
    letter-spacing: var(--theme-letterSpacing-body-lg-strong);
    text-transform: initial;
    text-decoration: initial;
    border-radius: var(--theme-borderRadius-md, var(--theme-borderRadius-md--sm));
    min-height: 4em;
    min-height: calc(3lh + var(--theme-spacing-cardInset, var(--theme-spacing-cardInset--sm))*2)
}

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

    :where(.c-base-cta-button):disabled, [aria-disabled=true i]:where(.c-base-cta-button) {
        cursor: default;
        opacity: .35
    }

:where(.c-base-cta-button--secondary) {
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-secondary) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-secondary) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSecondaryStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSecondaryMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSecondarySubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSecondaryDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSecondaryDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSecondaryInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSecondaryInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSecondaryInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSecondaryOnIndent);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSecondaryOnIndentHover);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSecondaryOnIndentActive);
    --theme-colors-indent-on-X: var(--theme-colors-onSecondaryIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSecondaryIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSecondaryStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSecondaryMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSecondarySubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSecondaryDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSecondaryDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSecondaryInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSecondaryInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSecondaryInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSecondaryOnIndent);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSecondaryOnIndentHover);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSecondaryOnIndentActive);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSecondaryExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSecondaryStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSecondaryMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSecondarySubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSecondaryDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSecondaryInteractive)
}

    :where(.c-base-cta-button--secondary):hover, :where(.group):hover :where(.c-base-cta-button--in-group.c-base-cta-button--secondary) {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-secondaryHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-secondaryHover) / var(--un-bg-opacity))
    }

    :where(.c-base-cta-button--secondary):active, :where(.group):active :where(.c-base-cta-button--in-group.c-base-cta-button--secondary) {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-secondaryActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-secondaryActive) / var(--un-bg-opacity))
    }

:where(.c-base-cta-button--surface) {
    --un-bg-opacity: 1;
    background-color: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --bgCurrent: rgb(var(--theme-colors-background-surface) / var(--un-bg-opacity));
    --theme-colors-strong-on-X: var(--theme-colors-onSurfaceStrong);
    --theme-colors-medium-on-X: var(--theme-colors-onSurfaceMedium);
    --theme-colors-subtle-on-X: var(--theme-colors-onSurfaceSubtle);
    --theme-colors-disabled-on-X: var(--theme-colors-onSurfaceDisabled);
    --theme-colors-danger-on-X: var(--theme-colors-onSurfaceDanger);
    --theme-colors-interactive-on-X: var(--theme-colors-onSurfaceInteractive);
    --theme-colors-interactiveHover-on-X: var(--theme-colors-onSurfaceInteractiveHover);
    --theme-colors-interactiveActive-on-X: var(--theme-colors-onSurfaceInteractiveActive);
    --theme-colors-onIndent-on-X: var(--theme-colors-onSurfaceOnIndent);
    --theme-colors-onIndentHover-on-X: var(--theme-colors-onSurfaceOnIndentHover);
    --theme-colors-onIndentActive-on-X: var(--theme-colors-onSurfaceOnIndentActive);
    --theme-colors-indent-on-X: var(--theme-colors-onSurfaceIndent);
    --theme-colors-indentActive-on-X: var(--theme-colors-onSurfaceIndentActive);
    --theme-colors-text-strong-on-X: var(--theme-colors-text-onSurfaceStrong);
    --theme-colors-text-medium-on-X: var(--theme-colors-text-onSurfaceMedium);
    --theme-colors-text-subtle-on-X: var(--theme-colors-text-onSurfaceSubtle);
    --theme-colors-text-disabled-on-X: var(--theme-colors-text-onSurfaceDisabled);
    --theme-colors-text-danger-on-X: var(--theme-colors-text-onSurfaceDanger);
    --theme-colors-text-interactive-on-X: var(--theme-colors-text-onSurfaceInteractive);
    --theme-colors-text-interactiveHover-on-X: var(--theme-colors-text-onSurfaceInteractiveHover);
    --theme-colors-text-interactiveActive-on-X: var(--theme-colors-text-onSurfaceInteractiveActive);
    --theme-colors-text-onIndent-on-X: var(--theme-colors-text-onSurfaceOnIndent);
    --theme-colors-text-onIndentHover-on-X: var(--theme-colors-text-onSurfaceOnIndentHover);
    --theme-colors-text-onIndentActive-on-X: var(--theme-colors-text-onSurfaceOnIndentActive);
    --theme-colors-border-extraStrong-on-X: var(--theme-colors-border-onSurfaceExtraStrong);
    --theme-colors-border-strong-on-X: var(--theme-colors-border-onSurfaceStrong);
    --theme-colors-border-medium-on-X: var(--theme-colors-border-onSurfaceMedium);
    --theme-colors-border-subtle-on-X: var(--theme-colors-border-onSurfaceSubtle);
    --theme-colors-border-danger-on-X: var(--theme-colors-border-onSurfaceDanger);
    --theme-colors-border-interactive-on-X: var(--theme-colors-border-onSurfaceInteractive)
}

    :where(.c-base-cta-button--surface):hover, :where(.group):hover :where(.c-base-cta-button--in-group.c-base-cta-button--surface) {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceHover) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceHover) / var(--un-bg-opacity))
    }

    :where(.c-base-cta-button--surface):active, :where(.group):active :where(.c-base-cta-button--in-group.c-base-cta-button--surface) {
        --un-bg-opacity: 1;
        background-color: rgb(var(--theme-colors-background-surfaceActive) / var(--un-bg-opacity));
        --bgCurrent: rgb(var(--theme-colors-background-surfaceActive) / var(--un-bg-opacity))
    }