/*
 * Token-backed button layer for modern chrome.
 *
 * This maps legacy Bootstrap button classes onto semantic design tokens:
 * action, neutral, destructive, and warning. It intentionally avoids layout
 * changes beyond stable shared button dimensions and focus treatment.
 */

.btn,
button.btn,
input.btn,
a.btn {
    min-height: var(--ds-button-height);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    box-sizing: border-box;
    padding: 6px var(--ds-button-padding-x);
    border-radius: var(--ds-button-radius);
    border-width: 1px;
    border-style: solid;
    box-shadow: var(--ds-button-shadow);
    font-family: var(--ds-font-family-sans);
    font-size: var(--ds-button-font-size);
    font-weight: var(--ds-button-font-weight);
    line-height: 1.2;
    letter-spacing: 0;
    text-shadow: none;
    background-image: none;
    transition:
        background-color var(--ds-motion-base) var(--ds-ease-out),
        border-color var(--ds-motion-base) var(--ds-ease-out),
        color var(--ds-motion-base) var(--ds-ease-out),
        box-shadow var(--ds-motion-base) var(--ds-ease-out);
}

input.btn,
button.btn {
    appearance: none;
}

.btn:focus,
.btn:focus-visible,
button.btn:focus,
input.btn:focus,
a.btn:focus {
    outline: none;
    box-shadow: var(--ds-focus-ring);
}

.btn.disabled,
.btn[disabled],
button.btn[disabled],
input.btn[disabled],
fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: var(--ds-button-disabled-opacity);
    box-shadow: none;
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-link),
.btn-default,
.btn-secondary {
    background-color: var(--ds-button-neutral-bg);
    border-color: var(--ds-button-neutral-border);
    color: var(--ds-button-neutral-text);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-link):hover,
.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-link):focus,
.btn-default:hover,
.btn-default:focus,
.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--ds-button-neutral-hover-bg);
    border-color: var(--ds-button-neutral-hover-border);
    color: var(--ds-button-neutral-text);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-link):active,
.btn:not(.btn-primary):not(.btn-success):not(.btn-info):not(.btn-danger):not(.btn-warning):not(.btn-link).active,
.btn-default:active,
.btn-default.active,
.btn-secondary:active,
.btn-secondary.active {
    background-color: var(--ds-button-neutral-pressed-bg);
    border-color: var(--ds-button-neutral-pressed-border);
    color: var(--ds-button-neutral-pressed-text);
}

.btn-primary,
.btn-success,
.btn-info,
.btn-action {
    background-color: var(--ds-button-action-bg);
    border-color: var(--ds-button-action-border);
    color: var(--ds-button-action-text);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.btn-action:hover,
.btn-action:focus {
    background-color: var(--ds-button-action-hover-bg);
    border-color: var(--ds-button-action-hover-border);
    color: var(--ds-button-action-text);
}

.btn-primary:active,
.btn-primary.active,
.btn-success:active,
.btn-success.active,
.btn-info:active,
.btn-info.active,
.btn-action:active,
.btn-action.active {
    background-color: var(--ds-button-action-pressed-bg);
    border-color: var(--ds-button-action-pressed-border);
    color: var(--ds-button-action-text);
}

.btn-danger,
.btn-destructive {
    background-color: var(--ds-button-destructive-bg);
    border-color: var(--ds-button-destructive-border);
    color: var(--ds-button-destructive-text);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-destructive:hover,
.btn-destructive:focus {
    background-color: var(--ds-button-destructive-hover-bg);
    border-color: var(--ds-button-destructive-hover-border);
    color: var(--ds-button-destructive-text);
}

.btn-danger:active,
.btn-danger.active,
.btn-destructive:active,
.btn-destructive.active {
    background-color: var(--ds-button-destructive-pressed-bg);
    border-color: var(--ds-button-destructive-pressed-border);
    color: var(--ds-button-destructive-text);
}

.btn-warning {
    background-color: var(--ds-button-warning-bg);
    border-color: var(--ds-button-warning-border);
    color: var(--ds-button-warning-text);
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: var(--ds-button-warning-hover-bg);
    border-color: var(--ds-button-warning-hover-border);
    color: var(--ds-button-warning-text);
}

.btn-warning:active,
.btn-warning.active {
    background-color: var(--ds-button-warning-pressed-bg);
    border-color: var(--ds-button-warning-pressed-border);
    color: var(--ds-button-warning-text);
}

.btn-link {
    min-height: auto;
    padding-right: 0;
    padding-left: 0;
    border-color: transparent;
    background: transparent;
    color: var(--ds-color-link);
    box-shadow: none;
}

.btn-link:hover,
.btn-link:focus {
    border-color: transparent;
    background: transparent;
    color: var(--ds-color-link-hover);
    text-decoration: underline;
}

.btn-mini,
.btn-xs {
    min-height: 26px;
    padding: 3px var(--ds-space-2);
    font-size: var(--ds-font-size-xs);
}

.btn-small,
.btn-sm {
    min-height: 30px;
    padding: 5px var(--ds-space-3);
    font-size: var(--ds-font-size-xs);
}

.btn-large,
.btn-lg {
    min-height: 40px;
    padding: 9px var(--ds-space-5);
    font-size: var(--ds-font-size-md);
}

.btn-group > .btn {
    min-height: var(--ds-button-height);
}

.btn-group.open .btn.dropdown-toggle {
    box-shadow: var(--ds-focus-ring);
}

.btn-group.tt-split-action {
    display: inline-flex;
    align-items: stretch;
    border-radius: var(--ds-button-radius);
    box-shadow: var(--ds-button-shadow);
}

.btn-group.tt-split-action > .btn {
    min-height: var(--ds-button-height);
    margin: 0;
    background-color: var(--ds-button-action-bg) !important;
    border-color: var(--ds-button-action-border) !important;
    color: var(--ds-button-action-text) !important;
    box-shadow: none;
}

.btn-group.tt-split-action > .btn:hover,
.btn-group.tt-split-action > .btn:focus,
.btn-group.tt-split-action.open > .btn.dropdown-toggle {
    background-color: var(--ds-button-action-hover-bg) !important;
    border-color: var(--ds-button-action-hover-border) !important;
    color: var(--ds-button-action-text) !important;
}

.btn-group.tt-split-action > .btn:active,
.btn-group.tt-split-action > .btn.active {
    background-color: var(--ds-button-action-pressed-bg) !important;
    border-color: var(--ds-button-action-pressed-border) !important;
}

.btn-group.tt-split-action > .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group.tt-split-action > .dropdown-toggle {
    width: 42px;
    padding-right: 0;
    padding-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: rgba(255, 255, 255, 0.22) !important;
}

.btn-group.tt-split-action .caret {
    border-top-color: var(--ds-button-action-text) !important;
}