/* -------------------------------------------------------------------------- */
/* Buttons */


.button-list { display: inline-flex; gap: var(--space-4); }

/* NB copy the same styling twice */
button.btn {
    appearance: none;

    font-size: var(--font-size-smaller);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);

    text-transform: uppercase;
    letter-spacing: var(--all-caps-space);
    word-spacing: var(--all-caps-word-space);
    font-weight: var(--font-weight-bold);
}
.btn {
    font-size: var(--font-size-smaller);
    font-family: var(--font-sans);
    font-weight: var(--font-weight-normal);

    text-transform: uppercase;
    letter-spacing: var(--all-caps-space);
    word-spacing: var(--all-caps-word-space);
    font-weight: var(--font-weight-bold);
}
.btn-primary, .btn-ghost {
    font-weight: var(--font-weight-bold);
}

.btn {
    /* display: inline-block; */
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--border-radius);
    border: 1.5px solid transparent;
    text-decoration: none;
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-0);
    transition: var(--hover-transition);
}
.btn-big{
    padding: var(--space-3) var(--space-4);
}
.btn:hover { box-shadow: var(--shadow-1); }
.btn-primary {
    color: var(--accent-contrast);
    background: var(--accent);
    border: 1.5px solid color-mix(in srgb, var(--accent) 86%, black);
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { background: var(--accent-active); }

.btn-secondary {
    background: var(--secondary);
    color: var(--text);
    border: 1.5px solid var(--text);
}

a.btn:hover {
    text-decoration: none!important;
}

.btn-secondary:hover  { background: var(--secondary-hover); }
.btn-secondary:active { background: var(--secondary-active); }

.btn-ghost {
    background: transparent;
    color: var(--link);
    border: 1.5px solid var(--accent-border);
}
.btn-ghost:hover { background: var(--accent-muted-bg); }


a.inline, button.inline {
    display: inline-block;
    color: inherit;

    padding: var(--space-1) var(--space-2);
    border-radius: var(--space-2);
    box-shadow: var(--shadow-0);
    background-color: var(--secondary);
    border: 1.5px solid var(--neutral-border);

    text-align: center;
    white-space: nowrap;
    transition: var(--hover-transition);

    font-weight: var(--font-weight-light);
    font-size: 90%;
}
a.inline:hover, button.inline:hover {
    background-color: var(--secondary-hover);
}
a.inline:active,
a.inline:focus,
button.inline:active,
button.inline:focus {
    background-color: var(--secondary-active);
    box-shadow: var(--shadow-1);
}


/* -------------------------------------------------------------------------- */
/* Semantic Action Buttons */

/* Destructive Action */
.btn-danger,
a.inline.btn-danger,
button.inline.btn-danger {
    background: var(--alert-bg);
    color: var(--alert-text);
    border: 1.5px solid var(--alert-border);
}
.btn-danger:hover,
a.inline.btn-danger:hover,
button.inline.btn-danger:hover {
    background: color-mix(in srgb, var(--alert-bg) 85%, var(--alert-icon));
    border-color: var(--alert-icon);
    color: var(--alert-text);
}
.btn-danger:active,
a.inline.btn-danger:active,
button.inline.btn-danger:active {
    background: color-mix(in srgb, var(--alert-bg) 70%, var(--alert-icon));
}

/* Warning Action */
.btn-warn,
a.inline.btn-warn,
button.inline.btn-warn {
    background: transparent;
    color: var(--warn);
    border: 1.5px solid color-mix(in srgb, var(--warn) 40%, transparent);
}
.btn-warn:hover,
a.inline.btn-warn:hover,
button.inline.btn-warn:hover {
    background: color-mix(in srgb, var(--warn) 10%, transparent);
    border-color: var(--warn);
}
.btn-warn:active,
a.inline.btn-warn:active,
button.inline.btn-warn:active {
    background: color-mix(in srgb, var(--warn) 20%, transparent);
}

/* Neutral Action */
.btn-neu,
a.inline.btn-neu,
button.inline.btn-neu {
    background: transparent;
    color: var(--link);
    border: 1.5px solid var(--accent-border);
}
.btn-neu:hover,
a.inline.btn-neu:hover,
button.inline.btn-neu:hover {
    background: color-mix(in srgb, var(--link) 10%, transparent);
    border-color: var(--neu);
}
.btn-neu:active,
a.inline.btn-neu:active,
button.inline.btn-neu:active {
    background: color-mix(in srgb, var(--link) 20%, transparent);
}

/* Ensure pause/unpause buttons align perfectly in the actions column */
.btn-status-toggle {
    min-width: 115px;
}