:where([data-ds-button]:not([data-ds-button="text"])) {
    display: inline-flex;
}

:is(button, a, label, summary)[data-ds-button]:not([data-ds-button="text"]) {
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--button-padding, var(--space-2) 18px);
    border: 1px solid var(--button-border, var(--color-border-input));
    border-radius: var(--button-radius, var(--radius-lg));
    background: var(--button-bg, var(--color-surface));
    color: var(--button-fg, var(--color-accent));
    box-shadow: var(--button-shadow, none);
    font: var(--button-weight, 600) var(--button-font-size, 14px)/20px var(--font-family);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: none;
    transition: translate var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}

[data-ds-button="primary"] {
    --button-bg: var(--color-brand);
    --button-border: var(--color-brand);
    --button-fg: var(--n-0);
    --button-hover: var(--color-brand-hover);
    --button-press: var(--color-brand-press);
    --button-shadow: var(--elevation-1);
}

[data-ds-button="destructive"] {
    --button-bg: var(--err-500);
    --button-border: var(--err-500);
    --button-fg: var(--n-0);
    --button-hover: var(--err-700);
    --button-press: var(--err-700);
}

:is([data-ds-button="ghost"], [data-ds-button="icon"], [data-ds-button="danger"], [data-ds-button="danger-icon"]) {
    --button-bg: transparent;
    --button-border: transparent;
    --button-hover-border: transparent;
}

:is([data-ds-button="danger"], [data-ds-button="danger-icon"]) {
    --button-fg: var(--err-700);
    --button-hover: var(--err-50);
    --button-press: var(--err-50);
}

[data-ds-button="filter"] {
    --button-radius: var(--radius-full);
    --button-font-size: 13px;
    --button-weight: 500;
    --button-fg: var(--color-text);
    --button-padding: var(--space-2) var(--space-4);
}

[data-ds-button="filter"]:is([aria-pressed="true"], .filter-active, .tab-active, .selected-tab) {
    --button-bg: var(--color-accent);
    --button-border: var(--color-accent);
    --button-fg: var(--n-0);
    --button-weight: 600;
    --button-hover: var(--plum-600);
    --button-press: var(--plum-700);
}

[data-ds-button="filter"] > span:not([aria-hidden]) {
    padding-inline: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--n-100);
    color: var(--color-text-muted);
}

[data-ds-button="filter"]:is([aria-pressed="true"], .tab-active) > span:not([aria-hidden]) {
    background: var(--plum-600);
    color: var(--n-0);
}

:is(button, a, label, summary)[data-ds-button]:is([data-ds-button="icon"], [data-ds-button="outline-icon"], [data-ds-button="danger-icon"]) {
    --button-font-size: 20px;
    --button-padding: 0;
    width: 44px;
    min-width: 44px;
}

.ds-x-icon {
    display: block;
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url('/images/x.svg') center / contain no-repeat;
}

.ds-chevron {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('/images/chevron.svg') center / contain no-repeat;
}

.ds-chevron-left { rotate: 180deg; }

:is(a, label, summary)[data-ds-button][aria-disabled="true"] {
    background: var(--n-200);
    color: var(--n-400);
    border-color: var(--n-200);
    box-shadow: none;
    cursor: not-allowed;
}

:is(button, a, label, summary)[data-ds-button]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    :is(button, a, label, summary)[data-ds-button]:not([data-ds-button="text"], :disabled, [aria-disabled="true"]):hover {
        background: var(--button-hover, var(--plum-50));
        border-color: var(--button-hover-border, var(--button-hover, var(--button-border, var(--plum-200))));
        color: var(--button-fg, var(--color-accent));
        transform: none;
    }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    :is(button, a, label, summary)[data-ds-button]:not([data-ds-button="text"], :disabled, [aria-disabled="true"]):hover {
        translate: 0 -2px;
    }
    :is(button, a, label, summary)[data-ds-button]:not([data-ds-button="text"], :disabled, [aria-disabled="true"]):active {
        translate: 0 1px;
    }
}

:is(button, a, label, summary)[data-ds-button]:not([data-ds-button="text"], :disabled, [aria-disabled="true"]):active {
    background: var(--button-press, var(--plum-100));
    border-color: var(--button-hover-border, var(--button-press, var(--button-border, var(--plum-200))));
    color: var(--button-fg, var(--color-accent));
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    :is(button, a, label, summary)[data-ds-button]:not([data-ds-button="text"]) {
        translate: none;
        transform: none;
        transition: none;
    }
}