.kbq-button,
.kbq-button-icon {
    --kbq-button-size-height: var(--kbq-size-3xl);
    --kbq-button-size-border-width: var(--kbq-size-border-width);
    --kbq-button-size-border-radius: var(--kbq-size-border-radius);
    --kbq-button-size-horizontal-padding: var(--kbq-size-m);
    --kbq-button-size-content-padding: var(--kbq-size-xs);
    --kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);
    --kbq-button-icon-size-vertical-padding: var(--kbq-size-s);
    --kbq-button-icon-size-content-padding: var(--kbq-size-xxs);
    /* THEME TOKENS */
    --kbq-button-filled-contrast-fade-off-background: var(--kbq-background-contrast);
    --kbq-button-filled-contrast-fade-off-border: transparent;
    --kbq-button-filled-contrast-fade-off-foreground: var(--kbq-foreground-on-contrast);
    --kbq-button-filled-contrast-fade-off-left-icon: var(--kbq-icon-on-contrast);
    --kbq-button-filled-contrast-fade-off-right-icon: var(--kbq-icon-on-contrast);
    --kbq-button-filled-contrast-fade-off-states-hover-background: var(--kbq-states-background-contrast-hover);
    --kbq-button-filled-contrast-fade-off-states-active-background: var(--kbq-states-background-contrast-active);
    --kbq-button-filled-contrast-fade-off-states-active-hover-background: var(--kbq-states-background-contrast-active);
    --kbq-button-filled-contrast-fade-off-states-disabled-background: var(--kbq-states-background-disabled);
    --kbq-button-filled-contrast-fade-off-states-disabled-border: transparent;
    --kbq-button-filled-contrast-fade-off-states-disabled-foreground: var(--kbq-states-foreground-disabled);
    --kbq-button-filled-contrast-fade-off-states-disabled-left-icon: var(--kbq-states-foreground-disabled);
    --kbq-button-filled-contrast-fade-off-states-disabled-right-icon: var(--kbq-states-foreground-disabled);
    --kbq-button-filled-contrast-fade-on-background: var(--kbq-background-contrast-fade);
    --kbq-button-filled-contrast-fade-on-border: transparent;
    --kbq-button-filled-contrast-fade-on-foreground: var(--kbq-foreground-contrast);
    --kbq-button-filled-contrast-fade-on-left-icon: var(--kbq-icon-contrast);
    --kbq-button-filled-contrast-fade-on-right-icon: var(--kbq-icon-contrast);
    --kbq-button-filled-contrast-fade-on-states-hover-background: var(--kbq-states-background-contrast-fade-hover);
    --kbq-button-filled-contrast-fade-on-states-active-background: var(--kbq-states-background-contrast-fade-active);
    --kbq-button-filled-contrast-fade-on-states-active-hover-background: var(
        --kbq-states-background-contrast-fade-active
    );
    --kbq-button-filled-contrast-fade-on-states-disabled-background: var(--kbq-states-background-disabled);
    --kbq-button-filled-contrast-fade-on-states-disabled-border: transparent;
    --kbq-button-filled-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);
    --kbq-button-filled-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-foreground-disabled);
    --kbq-button-filled-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-foreground-disabled);
    --kbq-button-outline-theme-fade-on-background: transparent;
    --kbq-button-outline-theme-fade-on-border: var(--kbq-line-theme-fade);
    --kbq-button-outline-theme-fade-on-foreground: var(--kbq-foreground-theme);
    --kbq-button-outline-theme-fade-on-left-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-right-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);
    --kbq-button-outline-theme-fade-on-states-hover-border: var(--kbq-line-theme-fade);
    --kbq-button-outline-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);
    --kbq-button-outline-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);
    --kbq-button-outline-theme-fade-on-states-active-border: var(--kbq-line-theme-fade);
    --kbq-button-outline-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);
    --kbq-button-outline-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-active-hover-background: var(--kbq-states-background-transparent-active);
    --kbq-button-outline-theme-fade-on-states-active-hover-border: var(--kbq-line-theme-fade);
    --kbq-button-outline-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);
    --kbq-button-outline-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);
    --kbq-button-outline-theme-fade-on-states-disabled-background: transparent;
    --kbq-button-outline-theme-fade-on-states-disabled-border: var(--kbq-states-line-disabled);
    --kbq-button-outline-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);
    --kbq-button-outline-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);
    --kbq-button-outline-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);
    --kbq-button-outline-contrast-fade-on-background: transparent;
    --kbq-button-outline-contrast-fade-on-border: var(--kbq-line-contrast-fade);
    --kbq-button-outline-contrast-fade-on-foreground: var(--kbq-foreground-contrast);
    --kbq-button-outline-contrast-fade-on-left-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-right-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);
    --kbq-button-outline-contrast-fade-on-states-hover-border: var(--kbq-line-contrast-fade);
    --kbq-button-outline-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);
    --kbq-button-outline-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);
    --kbq-button-outline-contrast-fade-on-states-active-border: var(--kbq-line-contrast-fade);
    --kbq-button-outline-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);
    --kbq-button-outline-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-active-hover-background: var(
        --kbq-states-background-transparent-active
    );
    --kbq-button-outline-contrast-fade-on-states-active-hover-border: var(--kbq-line-contrast-fade);
    --kbq-button-outline-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);
    --kbq-button-outline-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);
    --kbq-button-outline-contrast-fade-on-states-disabled-background: transparent;
    --kbq-button-outline-contrast-fade-on-states-disabled-border: var(--kbq-states-line-disabled);
    --kbq-button-outline-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);
    --kbq-button-outline-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);
    --kbq-button-outline-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);
    --kbq-button-transparent-theme-fade-on-border: transparent;
    --kbq-button-transparent-theme-fade-on-foreground: var(--kbq-foreground-theme);
    --kbq-button-transparent-theme-fade-on-background: transparent;
    --kbq-button-transparent-theme-fade-on-left-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-right-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-hover-border: transparent;
    --kbq-button-transparent-theme-fade-on-states-hover-foreground: var(--kbq-foreground-theme);
    --kbq-button-transparent-theme-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);
    --kbq-button-transparent-theme-fade-on-states-hover-left-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-hover-right-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-active-border: transparent;
    --kbq-button-transparent-theme-fade-on-states-active-foreground: var(--kbq-foreground-theme);
    --kbq-button-transparent-theme-fade-on-states-active-background: var(--kbq-states-background-transparent-active);
    --kbq-button-transparent-theme-fade-on-states-active-left-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-active-right-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-active-hover-border: transparent;
    --kbq-button-transparent-theme-fade-on-states-active-hover-foreground: var(--kbq-foreground-theme);
    --kbq-button-transparent-theme-fade-on-states-active-hover-background: var(
        --kbq-states-background-transparent-active
    );
    --kbq-button-transparent-theme-fade-on-states-active-hover-left-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-active-hover-right-icon: var(--kbq-icon-theme);
    --kbq-button-transparent-theme-fade-on-states-disabled-border: transparent;
    --kbq-button-transparent-theme-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);
    --kbq-button-transparent-theme-fade-on-states-disabled-background: transparent;
    --kbq-button-transparent-theme-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);
    --kbq-button-transparent-theme-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);
    --kbq-button-transparent-contrast-fade-on-border: transparent;
    --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast);
    --kbq-button-transparent-contrast-fade-on-background: transparent;
    --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-hover-border: transparent;
    --kbq-button-transparent-contrast-fade-on-states-hover-foreground: var(--kbq-foreground-contrast);
    --kbq-button-transparent-contrast-fade-on-states-hover-background: var(--kbq-states-background-transparent-hover);
    --kbq-button-transparent-contrast-fade-on-states-hover-left-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-hover-right-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-active-border: transparent;
    --kbq-button-transparent-contrast-fade-on-states-active-foreground: var(--kbq-foreground-contrast);
    --kbq-button-transparent-contrast-fade-on-states-active-background: var(--kbq-states-background-transparent-active);
    --kbq-button-transparent-contrast-fade-on-states-active-left-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-active-right-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-active-hover-border: transparent;
    --kbq-button-transparent-contrast-fade-on-states-active-hover-foreground: var(--kbq-foreground-contrast);
    --kbq-button-transparent-contrast-fade-on-states-active-hover-background: var(
        --kbq-states-background-transparent-active
    );
    --kbq-button-transparent-contrast-fade-on-states-active-hover-left-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-active-hover-right-icon: var(--kbq-icon-contrast);
    --kbq-button-transparent-contrast-fade-on-states-disabled-border: transparent;
    --kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-states-foreground-disabled);
    --kbq-button-transparent-contrast-fade-on-states-disabled-background: transparent;
    --kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var(--kbq-states-icon-disabled);
    --kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var(--kbq-states-icon-disabled);
}