.ui-button {
    --ui-button-background: var(--ui-color-surface);
    --ui-button-border: var(--ui-color-border-control);
    --ui-button-color: var(--ui-color-text);
    --ui-button-hover-background: var(--ui-color-surface-hover);
    --ui-button-hover-border: var(--ui-color-border-hover);
    --ui-button-hover-color: var(--ui-color-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ui-button-border);
    background-color: var(--ui-button-background);
    color: var(--ui-button-color);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: var(--ui-font-size-m);
    line-height: 1.2;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 120ms ease,
        border-color 120ms ease, color 120ms ease,
        box-shadow 120ms ease;
}

.ui-button--size-xs {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: var(--ui-font-size-xs);
    line-height: 1.2;
}

.ui-button--size-s {
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: var(--ui-font-size-s);
    line-height: 1.2;
}

.ui-button:not([disabled]):not(.disabled):hover,
.ui-button:not([disabled]):not(.disabled):focus {
    background-color: var(--ui-button-hover-background);
    border-color: var(--ui-button-hover-border);
    color: var(--ui-button-hover-color);
    text-decoration: none;
}

.ui-button:focus-visible {
    outline: 0;
    box-shadow: var(--ui-focus-ring);
}

.ui-button[disabled],
.ui-button.disabled {
    color: var(--ui-button-color);
    text-decoration: none;
    opacity: var(--ui-disabled-opacity);
    cursor: not-allowed;
    box-shadow: none;
}

.ui-button--default {
    --ui-button-background: var(--ui-color-surface);
    --ui-button-border: var(--ui-color-border-control);
    --ui-button-color: var(--ui-color-text);
    --ui-button-hover-background: var(--ui-color-surface-hover);
    --ui-button-hover-border: var(--ui-color-border-hover);
    --ui-button-hover-color: var(--ui-color-text);
}

.ui-button--primary {
    --ui-button-background: var(--ui-color-primary);
    --ui-button-border: var(--ui-color-primary);
    --ui-button-color: var(--ui-color-on-accent);
    --ui-button-hover-background: var(--ui-color-primary-hover);
    --ui-button-hover-border: var(--ui-color-primary-hover);
    --ui-button-hover-color: var(--ui-color-on-accent);
}

.ui-button--danger {
    --ui-button-background: var(--ui-color-danger);
    --ui-button-border: var(--ui-color-danger);
    --ui-button-color: var(--ui-color-on-accent);
    --ui-button-hover-background: var(--ui-color-danger-hover);
    --ui-button-hover-border: var(--ui-color-danger-hover);
    --ui-button-hover-color: var(--ui-color-on-accent);
}

.ui-button--subtle {
    --ui-button-background: transparent;
    --ui-button-border: transparent;
    --ui-button-color: var(--ui-color-text-muted);
    --ui-button-hover-background: var(--ui-color-surface-hover);
    --ui-button-hover-border: var(--ui-color-surface-hover);
    --ui-button-hover-color: var(--ui-color-text);
}

.ui-button--outline {
    --ui-button-outline-color: var(--ui-color-primary);
    --ui-button-outline-contrast: var(--ui-color-on-accent);
    --ui-button-background: transparent;
    --ui-button-border: var(--ui-button-outline-color);
    --ui-button-color: var(--ui-button-outline-color);
    --ui-button-hover-background: var(--ui-button-outline-color);
    --ui-button-hover-border: var(--ui-button-outline-color);
    --ui-button-hover-color: var(--ui-button-outline-contrast);
}