.app-button,
body input.app-button,
body .ui-button,
body .fc .fc-button {
    display: inline-flex;
    appearance: none;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--radius-small);
    cursor: pointer;
    font-family: var(--font-family-body);
    font-size: var(--font-size-compact);
    font-weight: var(--font-weight-strong);
    line-height: 1;
    text-align: center;
    box-shadow: none;
    white-space: nowrap;
    transition:
        color var(--motion-duration-quick) var(--motion-easing-standard),
        background-color var(--motion-duration-quick) var(--motion-easing-standard),
        border-color var(--motion-duration-quick) var(--motion-easing-standard),
        box-shadow var(--motion-duration-standard) var(--motion-easing-standard);
}

.app-button {
    text-decoration: none;
}

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

body .ui-button .ui-button-text {
    padding: 0;
    color: inherit;
    line-height: 1;
}

body .fc .fc-button-primary {
    border-color: var(--color-border-control);
    background: var(--color-surface);
    color: var(--color-text);
}

body .fc .fc-button-primary:not(:disabled):hover {
    border-color: var(--color-primary);
    background: var(--color-surface-hover);
    color: var(--color-text);
}

body .fc .fc-button-primary:not(:disabled):active,
body .fc .fc-button-primary.fc-button-active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

body .fc .fc-button-primary:not(:disabled):focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-primary-border);
}

.app-button-primary,
body input.app-button.app-button-primary {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.app-button-primary:not(:disabled):hover,
body .ui-button:not(.ui-state-disabled):hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-hover);
    color: var(--color-on-primary);
}

.app-button-primary:not(:disabled):active,
body .ui-button:not(.ui-state-disabled):active {
    border-color: var(--color-primary-active);
    background: var(--color-primary-active);
    color: var(--color-on-primary);
}

body .ui-button.ui-button-outlined {
    border-color: var(--color-primary);
    background: transparent;
    color: var(--color-primary-hover);
}

body .ui-button.ui-button-outlined:not(.ui-state-disabled):hover {
    border-color: var(--color-primary-hover);
    background: var(--color-primary-soft);
    color: var(--color-primary-hover);
}

body .ui-button.ui-button-outlined:not(.ui-state-disabled):active {
    border-color: var(--color-primary-active);
    background: var(--color-primary-highlight);
    color: var(--color-primary-hover);
}

.app-button-secondary,
body input.app-button.app-button-secondary,
body .ui-button.ui-button-secondary {
    border-color: var(--color-border-control);
    background: var(--color-surface);
    color: var(--color-text);
}

.app-button-secondary:not(:disabled):hover,
body .ui-button.ui-button-secondary:not(.ui-state-disabled):hover {
    border-color: var(--color-primary);
    background: var(--color-surface-hover);
    color: var(--color-text);
}

.app-button-secondary:not(:disabled):active,
body .ui-button.ui-button-secondary:not(.ui-state-disabled):active {
    border-color: var(--color-primary-active);
    background: var(--color-surface-interactive);
    color: var(--color-text);
}

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

body .ui-button.ui-button-danger:not(.ui-state-disabled):hover {
    border-color: var(--color-danger-hover);
    background: var(--color-danger-hover);
    color: var(--color-on-primary);
}

body .ui-button.ui-button-danger:not(.ui-state-disabled):active {
    border-color: var(--color-danger-active);
    background: var(--color-danger-active);
    color: var(--color-on-primary);
}

body .ui-button.ui-button-danger.ui-button-outlined {
    border-color: var(--color-danger);
    background: transparent;
    color: var(--color-danger);
}

body .ui-button.ui-button-danger.ui-button-outlined:not(.ui-state-disabled):hover {
    border-color: var(--color-danger-hover);
    background: var(--color-danger-soft);
    color: var(--color-danger-hover);
}

body .ui-button.ui-button-danger.ui-button-outlined:not(.ui-state-disabled):active {
    border-color: var(--color-danger-active);
    background: var(--color-danger-soft);
    color: var(--color-danger-hover);
}

.app-button:disabled,
.app-button[aria-disabled="true"],
body .ui-button.ui-state-disabled,
body .fc .fc-button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
}