.ui-button {
    /* Default */
    --ui-button-text-color: var(--theme-body-text-color);

    /* Primary Button - fill */
    --ui-button-primary-fill-font-name: var(--override-button-primary-fill-font-name, var(--theme-paragraph-font));
    --ui-button-primary-fill-font-name-hover: var(--override-button-primary-fill-font-name-hover, var(--theme-paragraph-font));
    --ui-button-primary-fill-font-weight: var(--override-button-primary-fill-font-weight, var(--theme-font-weight-semibold));
    --ui-button-primary-fill-font-weight-hover: var(--override-button-primary-fill-font-weight-hover, var(--theme-font-weight-semibold));
    --ui-button-primary-fill-font-italic: var(--override-button-primary-fill-font-italic, initial);
    --ui-button-primary-fill-font-italic-hover: var(--override-button-primary-fill-font-italic-hover, initial);
    --ui-button-primary-fill-font-underline: var(--override-button-primary-fill-font-underline, initial);
    --ui-button-primary-fill-font-underline-hover: var(--override-button-primary-fill-font-underline-hover, initial);
    --ui-button-primary-fill-width: var(--override-button-primary-fill-border-size, 0);
    --ui-button-primary-fill-text: var(--override-button-primary-fill-text, var(--theme-emphasis-fill-contrast));
    --ui-button-primary-fill-text-hover: var(--override-button-primary-fill-text-hover, var(--ui-button-primary-fill-text));
    --ui-button-primary-fill-text-disabled: var(--theme-text-30);
    --ui-button-primary-fill: var(--override-button-primary-fill, var(--theme-emphasis-fill));
    --ui-button-primary-fill-hover: var(--override-button-primary-fill-hover, var(--theme-emphasis-20));
    --ui-button-primary-fill-active: var(--override-button-primary-fill-active, var(--theme-emphasis-10));
    --ui-button-primary-fill-disabled: var(--theme-fill-40);
    --ui-button-primary-fill-outline-disabled: var(--theme-fill-30);

    /* Primary Button - outline */
    --ui-button-primary-outline-font-name: var(--override-button-primary-outline-font-name, var(--theme-paragraph-font));
    --ui-button-primary-outline-font-name-hover: var(--override-button-primary-outline-font-name-hover, var(--theme-paragraph-font));
    --ui-button-primary-outline-font-weight: var(--override-button-primary-outline-font-weight, var(--theme-font-weight-semibold));
    --ui-button-primary-outline-font-weight-hover: var(--override-button-primary-outline-font-weight-hover, var(--theme-font-weight-semibold));
    --ui-button-primary-outline-font-italic: var(--override-button-primary-outline-font-italic, initial);
    --ui-button-primary-outline-font-italic-hover: var(--override-button-primary-outline-font-italic-hover, initial);
    --ui-button-primary-outline-font-underline: var(--override-button-primary-outline-font-underline, initial);
    --ui-button-primary-outline-font-underline-hover: var(--override-button-primary-outline-font-underline-hover, initial);
    --ui-button-primary-outline-width: var(--override-button-primary-outline-border-size, 2px);
    --ui-button-primary-outline: var(--override-button-primary-outline, var(--ui-button-primary-fill));
    --ui-button-primary-outline-text: var(--override-button-primary-outline-text, var(--ui-button-primary-fill-text));
    --ui-button-primary-outline-hover: var(--override-button-primary-outline-hover, var(--ui-button-primary-outline));
    --ui-button-primary-outline-active: var(--override-button-primary-outline-active, var(--ui-button-primary-outline));
    --ui-button-primary-outline-bg-hover: var(--theme-fill-40);
    --ui-button-primary-outline-bg-active: var(--theme-fill-30);

    /* Primary Button - destructive */
    --ui-button-primary-destructive-text: var(--theme-critical-fill-contrast);
    --ui-button-primary-destructive: var(--theme-critical-fill);
    --ui-button-primary-destructive-fill-outline: var(--theme-critical-10);
    --ui-button-primary-destructive-hover: var(--theme-critical-20);
    --ui-button-primary-destructive-active: var(--theme-critical-10);
    --ui-button-primary-destructive-outline: var(--theme-critical-fill);
    --ui-button-primary-destructive-outline-text: var(--theme-critical-text);

    /* Secondary Button - fill */
    --ui-button-secondary-fill-font-name: var(--override-button-secondary-fill-font-name, var(--theme-paragraph-font));
    --ui-button-secondary-fill-font-name-hover: var(--override-button-secondary-fill-font-name-hover, var(--theme-paragraph-font));
    --ui-button-secondary-fill-font-weight: var(--override-button-secondary-fill-font-weight, var(--theme-font-weight-semibold));
    --ui-button-secondary-fill-font-weight-hover: var(--override-button-secondary-fill-font-weight-hover, var(--theme-font-weight-semibold));
    --ui-button-secondary-fill-font-italic: var(--override-button-secondary-fill-font-italic, initial);
    --ui-button-secondary-fill-font-italic-hover: var(--override-button-secondary-fill-font-italic-hover, initial);
    --ui-button-secondary-fill-font-underline: var(--override-button-secondary-fill-font-underline, initial);
    --ui-button-secondary-fill-font-underline-hover: var(--override-button-secondary-fill-font-underline-hover, initial);
    --ui-button-secondary-fill-width: var(--override-button-secondary-fill-border-size, 0);
    --ui-button-secondary-fill-width-hover: var(--override-button-secondary-fill-border-size-hover, var(--ui-button-secondary-fill-width));
    --ui-button-secondary-fill-text: var(--override-button-secondary-fill-text, var(--theme-emphasis-text));
    --ui-button-secondary-fill-text-hover: var(--override-button-secondary-fill-text-hover, var(--theme-emphasis-text));
    --ui-button-secondary-fill-text-active: var(--ui-button-secondary-fill-text-hover);
    --ui-button-secondary-fill-text-disabled: var(--override-button-secondary-fill-text-disabled, var(--theme-text-30));
    --ui-button-secondary-fill: var(--override-button-secondary-fill, var(--theme-fill-40));
    --ui-button-secondary-fill-hover: var(--override-button-secondary-fill-hover, var(--theme-emphasis-40));
    --ui-button-secondary-fill-active: var(--override-button-secondary-fill-active, var(--theme-emphasis-30));
    --ui-button-secondary-fill-disabled: var(--theme-fill-40);
    --ui-button-secondary-fill-outline: var(--override-button-secondary-fill-outline, transparent);
    --ui-button-secondary-fill-outline-hover: var(--override-button-secondary-fill-outline-hover, var(--ui-button-secondary-fill-outline));

    /* Secondary Button - outline */
    --ui-button-secondary-outline-font-name: var(--override-button-secondary-outline-font-name, var(--theme-paragraph-font));
    --ui-button-secondary-outline-font-name-hover: var(--override-button-secondary-outline-font-name-hover, var(--theme-paragraph-font));
    --ui-button-secondary-outline-font-weight: var(--override-button-secondary-outline-font-weight, var(--theme-font-weight-semibold));
    --ui-button-secondary-outline-font-weight-hover: var(--override-button-secondary-outline-font-weight-hover, var(--theme-font-weight-semibold));
    --ui-button-secondary-outline-font-italic: var(--override-button-secondary-outline-font-italic, initial);
    --ui-button-secondary-outline-font-italic-hover: var(--override-button-secondary-outline-font-italic-hover, initial);
    --ui-button-secondary-outline-font-underline: var(--override-button-secondary-outline-font-underline, initial);
    --ui-button-secondary-outline-font-underline-hover: var(--override-button-secondary-outline-font-underline-hover, initial);
    --ui-button-secondary-outline-width: var(--override-button-secondary-outline-border-size, 2px);
    --ui-button-secondary-outline-width-hover: var(--override-button-secondary-outline-border-size, var(--ui-button-secondary-outline-width));
    --ui-button-secondary-outline: var(--override-button-secondary-outline, var(--ui-button-secondary-fill));
    --ui-button-secondary-outline-hover: var(--override-button-secondary-outline-hover, var(--theme-fill-30));
    --ui-button-secondary-outline-active: var(--override-button-secondary-outline-active);
    --ui-button-secondary-outline-disabled: var(--theme-fill-40);
    --ui-button-secondary-outline-text: var(--override-button-secondary-outline-text, var(--theme-emphasis-text));
    --ui-button-secondary-outline-text-hover: var(--override-button-secondary-outline-text-hover, var(--ui-button-secondary-outline-text));
    --ui-button-secondary-outline-bg-hover: var(--theme-fill-40);
    --ui-button-secondary-outline-bg-active: var(--theme-fill-30);

    /* Secondary Button - destructive */
    --ui-button-secondary-destructive-outline: var(--theme-fill-40);
    --ui-button-secondary-destructive-text: var(--theme-critical-text);
    --ui-button-secondary-destructive: var(--theme-fill-40);
    --ui-button-secondary-destructive-hover: var(--theme-critical-40);
    --ui-button-secondary-destructive-active: var(--theme-critical-30);

    /* Neutral Button - fill */
    --ui-button-neutral-fill-text: var(--theme-text-20);
    --ui-button-neutral-fill-bg: var(--theme-fill-40);
    --ui-button-neutral-fill-bg-hover: var(--theme-fill-35);
    --ui-button-neutral-fill-bg-active: var(--theme-fill-20);

    /* Neutral button - outline */
    --ui-button-neutral-outline-width: 1px;
    --ui-button-neutral-outline-text: var(--theme-text-20);
    --ui-button-neutral-outline-text-disabled: var(--theme-fill-20);
    --ui-button-neutral-outline: var(--theme-fill-30);
    --ui-button-neutral-outline-hover: var(--theme-emphasis-fill);
    --ui-button-neutral-outline-active: var(--theme-emphasis-fill);

    /* Neutral button - destructive */
    --ui-button-neutral-fill-destructive-text: var(--ui-button-secondary-destructive-text);
    --ui-button-neutral-fill-destructive-text-disabled: var(--ui-button-primary-fill-text-disabled);
    --ui-button-neutral-fill-destructive-bg: var(--ui-button-secondary-destructive);
    --ui-button-neutral-fill-destructive-bg-hover: var(--ui-button-secondary-destructive-hover);
    --ui-button-neutral-fill-destructive-bg-active: var(--ui-button-secondary-destructive-active);
    --ui-button-neutral-fill-destructive-bg-disabled: var(--ui-button-secondary-destructive);
    --ui-button-neutral-outline-destructive: var(--ui-button-secondary-destructive);
    --ui-button-neutral-outline-destructive-bg-hover: var(--theme-fill-40);
    --ui-button-neutral-outline-destructive-bg-active: var(--theme-fill-35);

    /* Tertiary Button */
    --ui-button-tertiary-font-name: var(--override-button-tertiary-font-name, var(--theme-paragraph-font));
    --ui-button-tertiary-font-name-hover: var(--override-button-tertiary-font-name-hover, var(--theme-paragraph-font));
    --ui-button-tertiary-font-weight: var(--override-button-tertiary-font-weight, var(--theme-font-weight-medium));
    --ui-button-tertiary-font-weight-hover: var(--override-button-tertiary-font-weight-hover, var(--theme-font-weight-medium));
    --ui-button-tertiary-text: var(--override-button-tertiary-text, var(--theme-emphasis-text)); /* shared with subtle button */
    --ui-button-tertiary-text-disabled: var(--theme-text-30);
    --ui-button-tertiary: transparent;
    --ui-button-tertiary-hover: var(--override-button-tertiary-hover, var(--theme-emphasis-40));
    --ui-button-tertiary-active: var(--override-button-tertiary-active, var(--theme-emphasis-30));

    /* Tertiary Button - destructive */
    --ui-button-tertiary-destructive-text: var(--ui-button-secondary-destructive-text);
    --ui-button-tertiary-destructive-bg: transparent;
    --ui-button-tertiary-destructive-bg-hover: var(--ui-button-secondary-destructive-hover);
    --ui-button-tertiary-destructive-bg-active: var(--ui-button-secondary-destructive-active);

    position: relative;
    display: flex;
    gap: var(--space);
    align-items: center;
    overflow: hidden;
    font: var(--theme-paragraph-30-semibold);
    color: var(--ui-button-text-color);
    letter-spacing: var(--theme-paragraph-30-letter-spacing);
    cursor: pointer;
    border: none;
    border-radius: var(--ui-button-border-radius-override, var(--theme-border-radius-button-medium));
    transition: background-color 0.3s ease, opacity 0.3s ease;
}

.ui-button[disabled] {
    pointer-events: none;
    cursor: not-allowed;
}

.ui-button[hidden] {
    display: none;
}

.ui-button[fullwidth] {
    width: 100%;
}

.ui-button[opaque] {
    overflow: hidden;
}

.ui-button[opaque]::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: '';
}

/* size */

.ui-button[t-size="compact"] {
    gap: var(--space-half);
    height: var(--theme-form-compact-height);
    padding: 0 var(--space-x1_5);
    font-size: var(--theme-paragraph-20-font-size);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
    border-radius: var(--ui-button-border-radius-override, var(--theme-border-radius-button-compact));
}

.ui-button[t-size="small"] {
    height: var(--theme-form-small-height);
    padding: 0 var(--space-x1_5);
    font-size: var(--theme-paragraph-20-font-size);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
    border-radius: var(--ui-button-border-radius-override, var(--theme-border-radius-button-small));
}

.ui-button[t-size="compact"].ui-button--icon-only {
    width: var(--theme-form-compact-height);
    padding: 0;
}

.ui-button[t-size="small"].ui-button--icon-only {
    width: var(--theme-form-small-height);
    padding: 0;
}

.ui-button[t-size="medium"] {
    height: var(--theme-form-medium-height);
    padding: 0 var(--space-x2);
}

.ui-button[t-size="medium"].ui-button--icon-only {
    width: var(--theme-form-medium-height);
    padding: 0;
}

.ui-button[t-size="large"] {
    height: var(--theme-form-large-height);
    padding: 0 var(--space-x2_5);
    border-radius: var(--ui-button-border-radius-override, var(--theme-border-radius-button-large));
}

.ui-button[t-size="large"].ui-button--icon-only {
    width: var(--theme-form-large-height);
    padding: 0;
}

.ui-button__label {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-button__sublabel {
    color: var(--ui-button-sublabel-color-override, inherit);
}

/* dropdown */
.ui-button[dropdown] {
    --dropdown-icon-padding: 8px; /* Material icon has extra space on the left/right of the icon */

    padding: 0;
}

.ui-button[dropdown].ui-button--icon-only {
    width: 100%;
}

.ui-button-dropdown__label {
    display: flex;
    gap: var(--space);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

.ui-button-dropdown__empty-label {
    justify-content: flex-end;
}

.ui-button-dropdown__label-wrapper .ui-button__label {
    font: var(--theme-paragraph-20-bold);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button-dropdown__label-wrapper .ui-button__sublabel {
    font: var(--theme-paragraph-20-medium);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[dropdown] .ui-button__label,
.ui-button[dropdown] .ui-button__sublabel {
    flex: 1;
    text-align: left;
}

.ui-button[dropdown] .ui-button__sublabel {
    font-weight: var(--theme-font-weight-light);
}


.ui-button[dropdown] .ui-button__label--standalone {
    font-weight: var(--theme-font-weight-light);
    transition: font-size 0.2s, font-weight 0.1s ease 0.1s;
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[dropdown]:not([toggleDisabled]):focus .ui-button__label--standalone,
.ui-button--focus[dropdown]:not([toggleDisabled]) .ui-button__label--standalone {
    position: relative;
    top: var(--space-half);
    align-self: start;
    font: var(--theme-paragraph-20-bold);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="large"][dropdown]:not([toggleDisabled]):focus .ui-button__label--standalone,
.ui-button[t-size="large"][dropdown]:not([toggleDisabled]).ui-button--focus .ui-button__label--standalone {
    top: var(--space);
    font-size: var(--theme-paragraph-20-font-size);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="compact"][dropdown]:not([toggleDisabled]):focus .ui-button__label--standalone,
.ui-button[t-size="compact"][dropdown]:not([toggleDisabled]).ui-button--focus .ui-button__label--standalone {
    top: calc(var(--space-half) / 2);
    font-size: var(--theme-paragraph-20-font-size);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="compact"] .ui-button-dropdown__label {
    padding-right: calc(var(--space-x1_5) - var(--dropdown-icon-padding));
    padding-left: var(--space-x1_5);

    /* There's not enough room to show a sublabel in compact buttons */
    .ui-button__sublabel {
        display: none;
    }
}

.ui-button[t-size="small"][dropdown]:not([toggleDisabled]):focus .ui-button__label--standalone,
.ui-button[t-size="small"][dropdown]:not([toggleDisabled]).ui-button--focus .ui-button__label--standalone {
    top: calc(var(--space-half) / 2);
    font-size: var(--theme-paragraph-20-font-size);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="small"] .ui-button-dropdown__label {
    padding-right: calc(var(--space-x1_5) - var(--dropdown-icon-padding));
    padding-left: var(--space-x1_5);
}

.ui-button[t-size="medium"] .ui-button-dropdown__label {
    padding-right: calc(var(--space-x2) - var(--dropdown-icon-padding));
    padding-left: var(--space-x2);
}

.ui-button[t-size="large"] .ui-button-dropdown__label {
    padding-right: calc(var(--space-x2_5) - var(--dropdown-icon-padding));
    padding-left: var(--space-x2_5);
}

.ui-button-dropdown__label-wrapper {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
}

.ui-button[t-size="small"] .ui-button-dropdown__label-wrapper .ui-button__label {
    font: var(--theme-paragraph-20-medium);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="small"] .ui-button-dropdown__label-wrapper .ui-button__sublabel {
    font: var(--theme-paragraph-20-medium);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="large"] .ui-button-dropdown__label-wrapper .ui-button__label {
    font: var(--theme-paragraph-20-medium);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button[t-size="large"] .ui-button-dropdown__label-wrapper .ui-button__sublabel {
    font: var(--theme-paragraph-20-medium);
    letter-spacing: var(--theme-paragraph-20-letter-spacing);
}

.ui-button-dropdown--expanded,
.ui-button-dropdown--collapsed {
    transition: transform 0.2s;
}

.ui-button-dropdown--expanded {
    transform: rotate(-180deg);
}

.ui-button-dropdown--collapsed {
    transform: rotate(0deg);
}

.ui-button__icon--dropdown {
    --icon-size: var(--theme-icon-30-font-size);
    --material-icon-width: var(--icon-size);
    --material-icon-height: var(--icon-size);
}

.ui-button[disabled] .ui-button__icon--prefix {
    opacity: 0.4;
}

/* alignment */
.ui-button[t-align="center"] {
    justify-content: center;
}

.ui-button[t-align="left"] {
    justify-content: left;
}

.ui-button[t-align="right"] {
    justify-content: right;
}

.ui-button[t-align="space-between"] {
    justify-content: space-between;
}

.ui-button[t-align="flex-end"] {
    justify-content: flex-end;
}

/* Primary fill */
.ui-button[t-variant="primary"][t-style="fill"],
.ui-button[t-variant="primary"][t-style="fill"][destructive] {
    --ui-button-text-color: var(--ui-button-primary-fill-text);

    font-family: var(--ui-button-primary-fill-font-name);
    font-style: var(--ui-button-primary-fill-font-italic);
    font-weight: var(--ui-button-primary-fill-font-weight);
    text-decoration: var(--ui-button-primary-fill-font-underline);
    background-color: var(--ui-button-primary-fill);
    border: var(--ui-button-primary-fill-width) solid var(--ui-button-primary-outline);
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-fill-radius, var(--theme-border-radius-button-medium)));
    box-shadow: var(--override-button-primary-fill-shadow, none);
}

.ui-button[t-variant="primary"][t-style="fill"]:focus {
    --ui-button-text-color: var(--ui-button-primary-fill-text-hover);

    background-color: var(--ui-button-primary-fill-active);
    border-color: var(--ui-button-primary-outline-active);
    box-shadow: var(--override-button-primary-fill-shadow-hover, none);
}

.ui-button[t-variant="primary"][t-style="fill"]:not(.ui-button--disable-hover):hover {
    --ui-button-text-color: var(--ui-button-primary-fill-text-hover);

    font-family: var(--ui-button-primary-fill-font-name-hover);
    font-style: var(--ui-button-primary-fill-font-italic-hover);
    font-weight: var(--ui-button-primary-fill-font-weight-hover);
    text-decoration: var(--ui-button-primary-fill-font-underline-hover);
    background-color: var(--ui-button-primary-fill-hover);
    border-color: var(--ui-button-primary-outline-hover);
    box-shadow: var(--override-button-primary-fill-shadow-hover, none);
}

.ui-button[t-variant="primary"][t-style="fill"][destructive] {
    --ui-button-text-color: var(--ui-button-primary-destructive-text);

    background-color: var(--ui-button-primary-destructive);
    border-color: var(--ui-button-primary-destructive-fill-outline);
}

.ui-button[t-variant="primary"][t-style="fill"][destructive]:focus {
    background-color: var(--ui-button-primary-destructive-active);
    box-shadow: var(--override-button-primary-fill-shadow-hover, none);
}

.ui-button[t-variant="primary"][t-style="fill"][t-size="compact"],
.ui-button[t-variant="primary"][t-style="fill"][t-size="compact"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-fill-radius, var(--theme-border-radius-button-compact)));
}

.ui-button[t-variant="primary"][t-style="fill"][t-size="small"],
.ui-button[t-variant="primary"][t-style="fill"][t-size="small"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-fill-radius, var(--theme-border-radius-button-small)));
}

.ui-button[t-variant="primary"][t-style="fill"][t-size="large"],
.ui-button[t-variant="primary"][t-style="fill"][t-size="large"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-fill-radius, var(--theme-border-radius-button-large)));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="primary"][t-style="fill"]:disabled,
.ui-button[t-variant="primary"][t-style="fill"][destructive]:disabled {
    --ui-button-text-color: var(--ui-button-primary-fill-text-disabled);

    background-color: var(--ui-button-primary-fill-disabled);
    border-color: var(--ui-button-primary-fill-outline-disabled);
}

.ui-button[t-variant="primary"][t-style="fill"][destructive]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-primary-destructive-hover);
    box-shadow: var(--override-button-primary-fill-shadow-hover, none);
}

.ui-button[t-variant="primary"][t-style="fill"][opaque]:disabled,
.ui-button[t-variant="primary"][t-style="fill"][destructive][opaque]:disabled {
    background-color: var(--button-opaque-base-override, var(--theme-body-color));
}

.ui-button[t-variant="primary"][t-style="fill"][opaque]:disabled::before {
    background-color: var(--ui-button-primary-fill-disabled);
}

.ui-button[t-variant="primary"][t-style="fill"] .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="primary"][t-style="fill"] .ui-button-dropdown__label-wrapper .ui-button__sublabel,
.ui-button[t-variant="primary"][t-style="fill"][dropdown] .ui-button-dropdown__label .ui-button__label--standalone {
    font-family: inherit;
}

/* Primary outline */
.ui-button[t-variant="primary"][t-style="outline"],
.ui-button[t-variant="primary"][t-style="outline"][destructive] {
    --ui-button-text-color: var(--ui-button-primary-outline);

    font-family: var(--ui-button-primary-outline-font-name);
    font-style: var(--ui-button-primary-outline-font-italic);
    font-weight: var(--ui-button-primary-outline-font-weight);
    text-decoration: var(--ui-button-primary-outline-font-underline);
    background-color: transparent;
    border: var(--ui-button-primary-outline-width) solid var(--ui-button-primary-outline);
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-outline-radius, var(--theme-border-radius-button-medium)));
    box-shadow: var(--override-button-primary-outline-shadow, none);
}

.ui-button[t-variant="primary"][t-style="outline"][destructive] {
    --ui-button-text-color: var(--ui-button-primary-destructive-outline-text);

    border-color: var(--ui-button-primary-destructive-outline);
}

.ui-button[t-variant="primary"][t-style="outline"]:focus,
.ui-button[t-variant="primary"][t-style="outline"][destructive]:focus {
    background-color: var(--ui-button-primary-outline-bg-active);
    box-shadow: var(--override-button-primary-outline-shadow-hover, none);
}

.ui-button[t-variant="primary"][t-style="outline"][destructive]:focus {
    border-color: var(--ui-button-primary-destructive-active);
}

.ui-button[t-variant="primary"][t-style="outline"]:focus {
    border-color: var(--ui-button-primary-outline-active);
}

.ui-button[t-variant="primary"][t-style="outline"]:disabled,
.ui-button[t-variant="primary"][t-style="outline"][destructive]:disabled {
    --ui-button-text-color: var(--ui-button-primary-fill-text-disabled);

    border-color: var(--ui-button-primary-fill-disabled);
}

.ui-button[t-variant="primary"][t-style="outline"]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="primary"][t-style="outline"][destructive]:not(.ui-button--disable-hover):hover {
    font-family: var(--ui-button-primary-outline-font-name-hover);
    font-style: var(--ui-button-primary-outline-font-italic-hover);
    font-weight: var(--ui-button-primary-outline-font-weight-hover);
    text-decoration: var(--ui-button-primary-outline-font-underline-hover);
    background-color: var(--ui-button-primary-outline-bg-hover);
    box-shadow: var(--override-button-primary-outline-shadow-hover, none);
}

.ui-button[t-variant="primary"][t-style="outline"]:not(.ui-button--disable-hover):hover {
    border-color: var(--ui-button-primary-outline-hover);
}

.ui-button[t-variant="primary"][t-style="outline"][destructive]:not(.ui-button--disable-hover):hover {
    border-color: var(--ui-button-primary-destructive-hover);
}

.ui-button[t-variant="primary"][t-style="outline"][t-size="compact"],
.ui-button[t-variant="primary"][t-style="outline"][t-size="compact"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-outline-radius, var(--theme-border-radius-button-compact)));
}

.ui-button[t-variant="primary"][t-style="outline"][t-size="small"],
.ui-button[t-variant="primary"][t-style="outline"][t-size="small"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-outline-radius, var(--theme-border-radius-button-small)));
}

.ui-button[t-variant="primary"][t-style="outline"][t-size="large"],
.ui-button[t-variant="primary"][t-style="outline"][t-size="large"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-primary-outline-radius, var(--theme-border-radius-button-large)));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="primary"][t-style="outline"][opaque],
.ui-button[t-variant="primary"][t-style="outline"][destructive][opaque],
.ui-button[t-variant="primary"][t-style="outline"][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="primary"][t-style="outline"][destructive][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="primary"][t-style="outline"][opaque]:focus,
.ui-button[t-variant="primary"][t-style="outline"][destructive][opaque]:focus {
    background-color: var(--button-opaque-base-override, var(--theme-body-color));
}

.ui-button[t-variant="primary"][t-style="outline"][opaque]:focus::before,
.ui-button[t-variant="primary"][t-style="outline"][destructive][opaque]:focus::before {
    background-color: var(--ui-button-primary-outline-bg-active);
}

.ui-button[t-variant="primary"][t-style="outline"][opaque]:not(.ui-button--disable-hover):hover::before,
.ui-button[t-variant="primary"][t-style="outline"][destructive][opaque]:not(.ui-button--disable-hover):hover::before {
    background-color: var(--ui-button-primary-outline-bg-hover);
}

.ui-button[t-variant="primary"][t-style="outline"] .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="primary"][t-style="outline"] .ui-button-dropdown__label-wrapper .ui-button__sublabel,
.ui-button[t-variant="primary"][t-style="outline"][dropdown] .ui-button-dropdown__label .ui-button__label--standalone {
    font-family: inherit;
}

/* Secondary fill */
.ui-button[t-variant="secondary"][t-style="fill"],
.ui-button[t-variant="secondary"][t-style="fill"][destructive] {
    --ui-button-text-color: var(--ui-button-secondary-fill-text);

    font-family: var(--ui-button-secondary-fill-font-name);
    font-style: var(--ui-button-secondary-fill-font-italic);
    font-weight: var(--ui-button-secondary-fill-font-weight);
    text-decoration: var(--ui-button-secondary-fill-font-underline);
    background-color: var(--ui-button-secondary-fill);
    border: var(--ui-button-secondary-fill-width) solid var(--ui-button-secondary-fill-outline);
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-fill-radius, var(--theme-border-radius-button-medium)));
    box-shadow: var(--override-button-secondary-fill-shadow, none);
}

.ui-button[t-variant="secondary"][t-style="fill"]:focus {
    --ui-button-text-color: var(--ui-button-secondary-fill-text-hover);

    background-color: var(--ui-button-secondary-fill-active);
}

.ui-button[t-variant="secondary"][t-style="fill"]:not(.ui-button--disable-hover):hover {
    --ui-button-text-color: var(--ui-button-secondary-fill-text-hover);

    font-family: var(--ui-button-secondary-fill-font-name-hover);
    font-style: var(--ui-button-secondary-fill-font-italic-hover);
    font-weight: var(--ui-button-secondary-fill-font-weight-hover);
    text-decoration: var(--ui-button-secondary-fill-font-underline-hover);
    background-color: var(--ui-button-secondary-fill-hover);
    border-color: var(--ui-button-secondary-fill-outline-hover);
    border-width: var(--ui-button-secondary-fill-width-hover);
    box-shadow: var(--override-button-secondary-fill-shadow-hover, none);
}

.ui-button[t-variant="secondary"][t-style="fill"][destructive] {
    --ui-button-text-color: var(--ui-button-secondary-destructive-text);

    background-color: var(--ui-button-secondary-destructive);
    border-color: var(--ui-button-secondary-destructive-outline);
}

.ui-button[t-variant="secondary"][t-style="fill"][destructive]:focus {
    background-color: var(--ui-button-secondary-destructive-active);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="secondary"][t-style="fill"]:disabled,
.ui-button[t-variant="secondary"][t-style="fill"][destructive]:disabled {
    --ui-button-text-color: var(--ui-button-secondary-fill-text-disabled);

    background-color: var(--ui-button-secondary-fill-disabled);
}

.ui-button[t-variant="secondary"][t-style="fill"][destructive]:not(.ui-button--disable-hover):hover {
    --ui-button-text-color: var(--ui-button-secondary-destructive-text);

    background-color: var(--ui-button-secondary-destructive-hover);
}

.ui-button[t-variant="secondary"][t-style="fill"][t-size="compact"],
.ui-button[t-variant="secondary"][t-style="fill"][t-size="compact"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-fill-radius, var(--theme-border-radius-button-compact)));
}

.ui-button[t-variant="secondary"][t-style="fill"][t-size="small"],
.ui-button[t-variant="secondary"][t-style="fill"][t-size="small"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-fill-radius, var(--theme-border-radius-button-small)));
}

.ui-button[t-variant="secondary"][t-style="fill"][t-size="large"],
.ui-button[t-variant="secondary"][t-style="fill"][t-size="large"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-fill-radius, var(--theme-border-radius-button-large)));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="secondary"][t-style="fill"][opaque],
.ui-button[t-variant="secondary"][t-style="fill"][destructive][opaque],
.ui-button[t-variant="secondary"][t-style="fill"][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="secondary"][t-style="fill"][opaque]:focus {
    background-color: var(--button-opaque-base-override, var(--theme-body-color));
}

.ui-button[t-variant="secondary"][t-style="fill"][opaque]::before {
    background-color: var(--ui-button-secondary-fill);
}

.ui-button[t-variant="secondary"][t-style="fill"][destructive][opaque]::before {
    background-color: var(--ui-button-secondary-destructive);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="secondary"][t-style="fill"][opaque]:focus {
    background-color: var(--ui-button-secondary-fill-active);
}

.ui-button[t-variant="secondary"][t-style="fill"][destructive][opaque]:focus {
    background-color: var(--ui-button-secondary-destructive-active);
}

.ui-button[t-variant="secondary"][t-style="fill"][opaque]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-secondary-fill-hover);
}

.ui-button[t-variant="secondary"][t-style="fill"][destructive][opaque]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-secondary-destructive-hover);
}

.ui-button[t-variant="secondary"][t-style="fill"] .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="secondary"][t-style="fill"] .ui-button-dropdown__label-wrapper .ui-button__sublabel,
.ui-button[t-variant="secondary"][t-style="fill"][dropdown] .ui-button-dropdown__label .ui-button__label--standalone {
    font-family: inherit;
}

/* Secondary outline */
.ui-button[t-variant="secondary"][t-style="outline"],
.ui-button[t-variant="secondary"][t-style="outline"][destructive] {
    --ui-button-text-color: var(--ui-button-secondary-outline-text);

    font-family: var(--ui-button-secondary-outline-font-name);
    font-style: var(--ui-button-secondary-outline-font-italic);
    font-weight: var(--ui-button-secondary-outline-font-weight);
    text-decoration: var(--ui-button-secondary-outline-font-underline);
    background-color: transparent;
    border: var(--ui-button-secondary-outline-width) solid var(--ui-button-secondary-outline);
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-outline-radius, var(--theme-border-radius-button-medium)));
    box-shadow: var(--override-button-secondary-outline-shadow, none);
}

.ui-button[t-variant="secondary"][t-style="outline"][destructive] {
    --ui-button-text-color: var(--ui-button-secondary-destructive-text);

    background-color: transparent;
    border-color: var(--ui-button-secondary-destructive-outline);
}

.ui-button[t-variant="secondary"][t-style="outline"]:focus,
.ui-button[t-variant="secondary"][t-style="outline"][destructive]:focus {
    background-color: var(--ui-button-secondary-outline-bg-active);
    box-shadow: var(--override-button-secondary-outline-shadow-hover, none);
}

.ui-button[t-variant="secondary"][t-style="outline"]:focus {
    --ui-button-text-color: var(--ui-button-secondary-outline-text-hover);

    border-color: var(--ui-button-secondary-outline-active);
    border-width: var(--ui-button-secondary-outline-width-hover);
}

.ui-button[t-variant="secondary"][t-style="outline"]:disabled,
.ui-button[t-variant="secondary"][t-style="outline"][destructive]:disabled {
    --ui-button-text-color: var(--ui-button-secondary-fill-text-disabled);

    border-color: var(--ui-button-secondary-outline-disabled);
}

.ui-button[t-variant="secondary"][t-style="outline"][destructive]:focus {
    --ui-button-text-color: var(--ui-button-secondary-destructive-text);

    border-color: var(--ui-button-secondary-destructive-outline);
}

.ui-button[t-variant="secondary"][t-style="outline"]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="secondary"][t-style="outline"][destructive]:not(.ui-button--disable-hover):hover {
    font-family: var(--ui-button-secondary-outline-font-name-hover);
    font-style: var(--ui-button-secondary-outline-font-italic-hover);
    font-weight: var(--ui-button-secondary-outline-font-weight-hover);
    text-decoration: var(--ui-button-secondary-outline-font-underline-hover);
    background-color: var(--ui-button-secondary-outline-bg-hover);
    box-shadow: var(--override-button-secondary-outline-shadow-hover, none);
}

.ui-button[t-variant="secondary"][t-style="outline"]:not(.ui-button--disable-hover):hover {
    --ui-button-text-color: var(--ui-button-secondary-outline-text-hover);

    border-color: var(--ui-button-secondary-outline-hover);
    border-width: var(--ui-button-secondary-outline-width-hover);
}

.ui-button[t-variant="secondary"][t-style="outline"][destructive]:not(.ui-button--disable-hover):hover {
    --ui-button-text-color: var(--ui-button-secondary-destructive-text);

    border-color: var(--ui-button-secondary-destructive-outline);
}

.ui-button[t-variant="secondary"][t-style="outline"][t-size="compact"],
.ui-button[t-variant="secondary"][t-style="outline"][t-size="compact"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-outline-radius, var(--theme-border-radius-button-compact)));
}

.ui-button[t-variant="secondary"][t-style="outline"][t-size="small"],
.ui-button[t-variant="secondary"][t-style="outline"][t-size="small"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-outline-radius, var(--theme-border-radius-button-small)));
}

.ui-button[t-variant="secondary"][t-style="outline"][t-size="large"],
.ui-button[t-variant="secondary"][t-style="outline"][t-size="large"][destructive] {
    border-radius: var(--ui-button-border-radius-override, var(--override-button-secondary-outline-radius, var(--theme-border-radius-button-large)));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="secondary"][t-style="outline"][opaque],
.ui-button[t-variant="secondary"][t-style="outline"][destructive][opaque],
.ui-button[t-variant="secondary"][t-style="outline"][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="secondary"][t-style="outline"][destructive][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="secondary"][t-style="outline"][opaque]:focus,
.ui-button[t-variant="secondary"][t-style="outline"][destructive][opaque]:focus {
    background-color: var(--button-opaque-base-override, var(--theme-body-color));
}

.ui-button[t-variant="secondary"][t-style="outline"]:not(.ui-button--disable-hover):hover::before,
.ui-button[t-variant="secondary"][t-style="outline"][destructive]:not(.ui-button--disable-hover):hover::before {
    background-color: var(--ui-button-secondary-outline-bg-hover);
}

.ui-button[t-variant="secondary"][t-style="outline"][opaque]:focus::before,
.ui-button[t-variant="secondary"][t-style="outline"][destructive][opaque]:focus::before {
    background-color: var(--ui-button-secondary-outline-bg-active);
}

.ui-button[t-variant="secondary"][t-style="outline"] .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="secondary"][t-style="outline"] .ui-button-dropdown__label-wrapper .ui-button__sublabel,
.ui-button[t-variant="secondary"][t-style="outline"][dropdown] .ui-button-dropdown__label .ui-button__label--standalone {
    font-family: inherit;
}

/* Neutral fill */
.ui-button[t-variant="neutral"][t-style="fill"] {
    --ui-button-text-color: var(--ui-button-neutral-fill-text);

    background-color: var(--ui-button-neutral-fill-bg);
}

.ui-button[t-variant="neutral"][t-style="fill"],
.ui-button[t-variant="neutral"][t-style="fill"][destructive],
.ui-button[t-variant="neutral"][t-style="fill"]:disabled {
    border-radius: var(--theme-border-radius-input-medium);
}

.ui-button[t-variant="neutral"][t-style="fill"]:focus {
    background-color: var(--ui-button-neutral-fill-bg-active);
}

.ui-button[t-variant="neutral"][t-style="fill"]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-neutral-fill-bg-hover);
}

.ui-button[t-variant="neutral"][t-style="fill"][destructive] {
    --ui-button-text-color: var(--ui-button-neutral-fill-destructive-text);

    background-color: var(--ui-button-neutral-fill-destructive-bg);
}

.ui-button[t-variant="neutral"][t-style="fill"][destructive]:focus {
    background-color: var(--ui-button-neutral-fill-destructive-bg-active);
}

.ui-button[t-variant="neutral"][t-style="fill"][t-size="compact"],
.ui-button[t-variant="neutral"][t-style="fill"][t-size="compact"][destructive],
.ui-button[t-variant="neutral"][t-style="fill"][t-size="compact"]:disabled {
    border-radius: var(--theme-border-radius-input-compact);
}

.ui-button[t-variant="neutral"][t-style="fill"][t-size="small"],
.ui-button[t-variant="neutral"][t-style="fill"][t-size="small"][destructive],
.ui-button[t-variant="neutral"][t-style="fill"][t-size="small"]:disabled {
    border-radius: var(--theme-border-radius-input-small);
}

.ui-button[t-variant="neutral"][t-style="fill"][t-size="large"],
.ui-button[t-variant="neutral"][t-style="fill"][t-size="large"][destructive],
.ui-button[t-variant="neutral"][t-style="fill"][t-size="large"]:disabled {
    border-radius: var(--theme-border-radius-input-large);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="fill"]:disabled,
.ui-button[t-variant="neutral"][t-style="fill"][destructive]:disabled {
    --ui-button-text-color: var(--ui-button-neutral-fill-destructive-text-disabled);

    background-color: var(--ui-button-neutral-fill-destructive-bg-disabled);
}

.ui-button[t-variant="neutral"][t-style="fill"][destructive]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-neutral-fill-destructive-bg-hover);
}

.ui-button[t-variant="neutral"][t-style="fill"][dropdown]:not([destructive]) .ui-button__sublabel {
    color: var(--ui-button-sublabel-color-override, var(--theme-text-20));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="fill"][opaque],
.ui-button[t-variant="neutral"][t-style="fill"][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="neutral"][t-style="fill"][opaque]:disabled,
.ui-button[t-variant="neutral"][t-style="fill"][destructive][opaque]:disabled,
.ui-button[t-variant="neutral"][t-style="fill"][destructive][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="neutral"][t-style="fill"][destructive][opaque]:focus {
    background-color: var(--button-opaque-base-override, var(--theme-body-color));
}

.ui-button[t-variant="neutral"][t-style="fill"][opaque]:focus::before {
    background-color: var(--ui-button-neutral-fill-bg-active);
}

.ui-button[t-variant="neutral"][t-style="fill"][opaque]:not(:disabled)::before {
    background-color: var(--ui-button-neutral-fill-bg);
}

.ui-button[t-variant="neutral"][t-style="fill"][opaque]:disabled::before,
.ui-button[t-variant="neutral"][t-style="fill"][destructive][opaque]:disabled::before {
    background-color: var(--ui-button-neutral-fill-destructive-bg-disabled);
}

.ui-button[t-variant="neutral"][t-style="fill"][destructive][opaque]:focus::before {
    background-color: var(--ui-button-neutral-fill-destructive-bg-active);
}

.ui-button[t-variant="neutral"][t-style="fill"][opaque]:not(.ui-button--disable-hover):hover::before {
    background-color: var(--ui-button-neutral-fill-bg-hover);
}

.ui-button[t-variant="neutral"][t-style="fill"][destructive][opaque]:not(.ui-button--disable-hover):hover::before {
    background-color: var(--ui-button-neutral-fill-destructive-bg-hover);
}

/* Neutral outline */
.ui-button[t-variant="neutral"][t-style="outline"],
.ui-button[t-variant="neutral"][t-style="outline"][destructive] {
    --ui-button-text-color: var(--ui-button-neutral-outline-text);

    background-color: transparent;
    border: var(--ui-button-neutral-outline-width) solid var(--ui-button-neutral-outline);
    border-radius: var(--theme-border-radius-input-medium);
}

.ui-button[t-variant="neutral"][t-style="outline"]:focus,
.ui-button--focus.ui-button[t-variant="neutral"][t-style="outline"] {
    border: var(--ui-button-neutral-outline-width) solid var(--ui-button-neutral-outline-active);
    outline: var(--ui-button-neutral-outline-width) solid var(--ui-button-neutral-outline-active);
    outline-offset: calc(var(--ui-button-neutral-outline-width) * -2);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="outline"]:focus .ui-button__label--standalone,
.ui-button--focus.ui-button[t-variant="neutral"][t-style="outline"]:focus .ui-button__label--standalone {
    color: var(--theme-text-10);
}

.ui-button[t-variant="neutral"][t-style="outline"]:not(.ui-button--disable-hover):hover {
    border-color: var(--ui-button-neutral-outline-hover);
}

.ui-button[t-variant="neutral"][t-style="outline"][destructive]:not(:disabled) {
    border-color: var(--ui-button-neutral-outline-destructive);
}

.ui-button[t-variant="neutral"][t-style="outline"][destructive]:not(:disabled),
.ui-button[t-variant="neutral"][t-style="outline"][destructive]:focus .ui-button__label--standalone,
.ui-button[t-variant="neutral"][t-style="outline"][destructive]:not(:disabled) .ui-button__icon--suffix {
    color: var(--ui-button-neutral-fill-destructive-text);
}

.ui-button[t-variant="neutral"][t-style="outline"][destructive]:focus {
    background-color: var(--ui-button-neutral-outline-destructive-bg-active);
    border-color: var(--ui-button-neutral-outline-destructive);
    outline-color: var(--ui-button-neutral-outline-destructive);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="outline"]:disabled,
.ui-button[t-variant="neutral"][t-style="outline"][destructive]:disabled {
    background-color: var(--theme-fill-40);
    border-color: var(--theme-fill-40);
}

.ui-button[t-variant="neutral"][t-style="outline"][destructive]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-neutral-outline-destructive-bg-hover);
}

.ui-button[t-variant="neutral"][t-style="outline"][t-size="compact"],
.ui-button[t-variant="neutral"][t-style="outline"][t-size="compact"][destructive] {
    border-radius: var(--theme-border-radius-input-compact);
}

.ui-button[t-variant="neutral"][t-style="outline"][t-size="small"],
.ui-button[t-variant="neutral"][t-style="outline"][t-size="small"][destructive] {
    border-radius: var(--theme-border-radius-input-small);
}

.ui-button[t-variant="neutral"][t-style="outline"][t-size="large"],
.ui-button[t-variant="neutral"][t-style="outline"][t-size="large"][destructive] {
    border-radius: var(--theme-border-radius-input-large);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="outline"][opaque],
.ui-button[t-variant="neutral"][t-style="outline"][destructive][opaque],
.ui-button[t-variant="neutral"][t-style="outline"][opaque]:not(.ui-button--disable-hover):hover,
.ui-button[t-variant="neutral"][t-style="outline"][opaque]:focus,
.ui-button--focus.ui-button[t-variant="neutral"][t-style="outline"][opaque],
.ui-button[t-variant="neutral"][t-style="outline"][destructive][opaque]:not(.ui-button--disable-hover):hover {
    background-color: var(--button-opaque-base-override, var(--theme-body-color));
}

.ui-button[t-variant="neutral"][t-style="outline"][destructive][opaque]:focus::before {
    background-color: var(--ui-button-neutral-outline-destructive-bg-active);
}

.ui-button[t-variant="neutral"][t-style="outline"][destructive][opaque]:not(.ui-button--disable-hover):hover::before {
    background-color: var(--ui-button-neutral-outline-destructive-bg-hover);
}

.ui-button[t-variant="neutral"][t-style="outline"]:disabled::before,
.ui-button[t-variant="neutral"][t-style="outline"][destructive]:disabled::before {
    background-color: var(--theme-fill-40);
}

.ui-button[t-variant="neutral"][t-style="outline"]:not([destructive]) .ui-button-dropdown__label-wrapper .ui-button__label {
    color: var(--theme-text-10);
}

.ui-button[t-variant="neutral"][t-style="outline"]:not([destructive]) .ui-button-dropdown__label-wrapper .ui-button__sublabel {
    color: var(--ui-button-sublabel-color-override, var(--theme-text-10));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="outline"]:disabled .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="neutral"][t-style="outline"][destructive]:disabled .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="neutral"][t-style="outline"]:not([destructive]) .ui-button__label--standalone {
    color: var(--theme-text-20);
}

.ui-button[t-variant="neutral"][t-style="outline"]:disabled .ui-button-dropdown__label-wrapper .ui-button__sublabel,
.ui-button[t-variant="neutral"][t-style="outline"][destructive]:disabled .ui-button-dropdown__label-wrapper .ui-button__sublabel {
    color: var(--ui-button-sublabel-color-override, var(--theme-text-20));
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="neutral"][t-style="outline"][dropdown]:disabled .ui-button__label--standalone {
    color: var(--theme-text-30);
}

.ui-button[t-variant="neutral"][t-style="outline"][dropdown]:not([destructive]) .ui-button__icon--dropdown {
    color: var(--theme-fill-20);
}

/* Tertiary */
.ui-button[t-variant="tertiary"] {
    --ui-button-text-color: var(--ui-button-tertiary-text);

    font-family: var(--ui-button-tertiary-font-name);
    font-weight: var(--ui-button-tertiary-font-weight);
    background-color: var(--ui-button-tertiary);
}

.ui-button[t-variant="tertiary"]:focus {
    background-color: var(--ui-button-tertiary-active);
}

.ui-button[t-variant="tertiary"]:not(.ui-button--disable-hover):hover {
    font-family: var(--ui-button-tertiary-font-name-hover);
    font-weight: var(--ui-button-tertiary-font-weight-hover);
    background-color: var(--ui-button-tertiary-hover);
}

.ui-button[t-variant="tertiary"][destructive] {
    --ui-button-text-color: var(--ui-button-tertiary-destructive-text);

    background-color: var(--ui-button-tertiary-destructive-bg);
}

.ui-button[t-variant="tertiary"][destructive]:focus {
    background-color: var(--ui-button-tertiary-destructive-bg-active);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="tertiary"]:disabled,
.ui-button[t-variant="tertiary"][destructive]:disabled {
    --ui-button-text-color: var(--ui-button-tertiary-text-disabled);
}

.ui-button[t-variant="tertiary"][destructive]:not(.ui-button--disable-hover):hover {
    background-color: var(--ui-button-tertiary-destructive-bg-hover);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="tertiary"] .ui-button-dropdown__label-wrapper .ui-button__label,
.ui-button[t-variant="tertiary"] .ui-button-dropdown__label-wrapper .ui-button__sublabel,
.ui-button[t-variant="tertiary"][dropdown] .ui-button-dropdown__label .ui-button__label--standalone {
    font-family: inherit;
}

/* Subtle */
.ui-button[t-variant="subtle"],
.ui-button[t-variant="subtle"][destructive] {
    --ui-button-text-color: var(--theme-fill-20);

    display: initial;
    height: auto;
    padding: 0;
    font-weight: inherit;
    background: none;
}

.ui-button[t-variant="subtle"][destructive] {
    --ui-button-text-color: var(--theme-fill-20);
}

.ui-button[t-variant="subtle"][destructive]:hover {
    --ui-button-text-color: var(--theme-critical-fill);
}

.ui-button[t-variant="subtle"][destructive]:focus {
    --ui-button-text-color: var(--theme-critical-10);
}

.ui-button[t-variant="subtle"]:hover {
    --ui-button-text-color: var(--theme-fill-10);
}

.ui-button[t-variant="subtle"]:focus {
    --ui-button-text-color: var(--ui-button-tertiary-text);
}

.ui-button[t-variant="subtle"][disabled],
.ui-button[t-variant="subtle"][destructive][disabled] {
    --ui-button-text-color: var(--theme-fill-30);
}

/* Row */
.ui-button[t-variant="row"],
.ui-button[t-variant="row"][destructive] {
    --ui-button-text-color: var(--theme-text-10);

    position: relative;
    display: flex;
    gap: 0;
    justify-content: space-between;
    height: auto;
    padding: var(--space-x2) 0;
    overflow: visible;
    font-weight: inherit;
    background: none;
    border-bottom: 1px solid var(--theme-divider-20);
    border-radius: 0;
    transition: border-color 0.1s ease;
}

.ui-button[t-variant="row"][t-align="flex-end"],
.ui-button[t-variant="row"][t-align="flex-end"][destructive] {
    justify-content: flex-end;
}

.ui-button[t-variant="row"][destructive] {
    --ui-button-text-color: var(--theme-critical-text);
}

.ui-button[t-variant="row"][disabled],
.ui-button[t-variant="row"][destructive][disabled] {
    --ui-button-text-color: var(--theme-text-30);
}

.ui-button[t-variant="row"]::before,
.ui-button[t-variant="row"][destructive]::before {
    position: absolute;
    top: 0;
    left: calc(var(--space-x1_5) * -1);
    display: block;
    width: calc(100% + calc(var(--space-x1_5) * 2));
    height: 100%;
    content: '';
    background-color: var(--theme-emphasis-40);
    border-radius: var(--theme-border-radius-input);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ui-button[t-variant="row"][destructive]::before {
    background-color: var(--theme-fill-40);
}

.ui-button[t-variant="row"]:hover,
.ui-button[t-variant="row"][destructive]:hover {
    border-color: transparent;
}

.ui-button[t-variant="row"]:hover::before,
.ui-button[t-variant="row"][destructive]:hover::before {
    opacity: 1;
}

.ui-button[t-variant="row"]:active::before {
    background-color: var(--theme-emphasis-30);
}

.ui-button[t-variant="row"][destructive]:active::before {
    background-color: var(--theme-fill-30);
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="row"] .ui-button__label {
    width: 100%;
    text-align: left;
}

.ui-button[t-variant="row"] .ui-button__icon,
.ui-button[t-variant="row"][destructive] .ui-button__icon {
    order: 2;
}

/* stylelint-disable-next-line no-descending-specificity */
.ui-button[t-variant="row"] span,
.ui-button[t-variant="row"][destructive] span {
    position: relative;
}

/* Warning */
.ui-button[t-variant="warning"] {
    color: var(--theme-warning-text);
    background-color: var(--theme-pill-warning-fill);
}

/* Link */
.ui-button[t-element="link"] {
    --ui-button-text-color: var(--theme-link-color);

    display: initial;
    height: auto;
    padding: 0;
    font-weight: inherit;
    text-decoration: underline;
    background: none;
}

@media (min-width: 700px) {
    .ui-button[t-element="link"] {
        text-decoration: none;
    }
}

.ui-button[t-element="link"]:hover,
.ui-button[t-element="link"]:focus {
    opacity: 0.6;
}

.ui-button[t-element="link"][contrast] {
    --ui-button-text-color: var(--theme-text-inverse);
}

.ui-button__overlay {
    /* opaque buttons override this */
    position: absolute !important;
    top: 0;
    left: 0;
    display: flex;
    gap: var(--space);
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--theme-body-text-color);
    background-color: var(--theme-surface-body-overlay);
}

.ui-button__overlay--success {
    color: var(--theme-success-fill-contrast);
    background-color: var(--theme-success-fill);
}