:where(button, .button, .design-button, .shell-icon-button, .mud-button-root) {
    touch-action: manipulation;
    transition:
        color 160ms ease-out,
        background-color 160ms ease-out,
        border-color 160ms ease-out,
        box-shadow 160ms ease-out,
        opacity 160ms ease-out,
        transform 160ms ease-out;
}

:where(button, .button, .design-button, .shell-icon-button, .mud-button-root):not(:disabled):active {
    box-shadow: none;
    transform: translateY(0) scale(.98);
}

:where(.design-card, .mud-paper) {
    transition:
        border-color 180ms ease-out,
        box-shadow 180ms ease-out,
        transform 180ms ease-out;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--color-accent-blue) 72%, transparent);
    outline-offset: 3px;
}

:where(a):not(.button):hover {
    text-decoration-color: currentColor;
}

:where(input, select, textarea, .mud-input-control) {
    transition:
        background-color 160ms ease-out,
        border-color 160ms ease-out,
        box-shadow 160ms ease-out;
}

:where(input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: .55;
}

@media (prefers-reduced-motion: reduce) {
    :where(button, .button, .design-button, .shell-icon-button, .mud-button-root, .design-card, .mud-paper) {
        transition-duration: .01ms;
    }
}