/*
 * Generic buttons (portable).
 * Single .btn base + semantic modifiers. Radius from --btn-radius.
 * Icon-only action buttons get their SVG injected by js/base/icons.js
 * from a single glyph source (data-icon attribute).
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding-block: 0.3rem;
    padding-inline: 0.7rem;
    font: inherit;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--btn-radius, 0.25rem);
    cursor: pointer;
}

.btn:hover { border-color: var(--highlight); }
.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--primary-contrast, #fff);
}

.btn-danger  { color: var(--danger); }
.btn-success { color: var(--success); }
.btn-sm { padding-block: 0.15rem; padding-inline: 0.4rem; font-size: 0.75rem; }

.btn-danger.btn-solid {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* Icon-only (row actions): glyph inherits currentColor, sized up since
   there is no adjacent text label. */
.btn-icon {
    padding-block: 0.2rem;
    padding-inline: 0.2rem;
}

.btn-icon svg {
    inline-size: 1.05em;
    block-size: 1.05em;
    fill: currentColor;
}