/*
 * Button (WP9; UI-Design-Principles Sec. 6). One family, variants as extra classes:
 * --primary (Ember, max 1 per view), --secondary (outline), --ghost (toolbars),
 * --danger (confirm/danger zones). Sizes --sm / --md (md default). Loading state:
 * spinner replaces the icon, the label stays (Sec. 6).
 *
 * Class schema: gtx-btn, gtx-btn--<variant>, gtx-btn--<size>, gtx-btn__icon,
 * gtx-btn__spinner, is-loading.
 */

.gtx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gtx-s2);
    padding: 0 var(--gtx-s4);
    min-height: 40px; /* 40px touch target (Sec. 9) */
    border: 1px solid transparent;
    border-radius: var(--gtx-r-btn);
    background: transparent;
    color: var(--gtx-text);
    font-family: var(--gtx-font-body);
    font-size: var(--gtx-fs-ui);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--gtx-t-fast) var(--gtx-ease),
        border-color var(--gtx-t-fast) var(--gtx-ease),
        color var(--gtx-t-fast) var(--gtx-ease);
}

.gtx-btn:hover {
    text-decoration: none;
}

.gtx-btn:disabled,
.gtx-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.gtx-btn--sm {
    min-height: 32px;
    padding: 0 var(--gtx-s3);
    font-size: var(--gtx-fs-meta);
}

.gtx-btn--md {
    min-height: 40px;
}

/* Primary — Ember fill, near-black label (AA in both themes). */
.gtx-btn--primary {
    background: var(--gtx-ember);
    color: var(--gtx-on-ember);
    border-color: var(--gtx-ember);
}

.gtx-btn--primary:hover {
    background: var(--gtx-ember-deep);
    border-color: var(--gtx-ember-deep);
}

/* Secondary — outline. */
.gtx-btn--secondary {
    background: transparent;
    color: var(--gtx-text);
    border-color: var(--gtx-line);
}

.gtx-btn--secondary:hover {
    border-color: var(--gtx-text-dim);
    background: var(--gtx-surface-2);
}

/* Ghost — for tables/toolbars, no chrome until hover. */
.gtx-btn--ghost {
    background: transparent;
    color: var(--gtx-text-dim);
    border-color: transparent;
}

.gtx-btn--ghost:hover {
    color: var(--gtx-text);
    background: var(--gtx-surface-2);
}

/* Danger — only in confirmation dialogs / danger zones (Sec. 6). */
.gtx-btn--danger {
    background: transparent;
    color: var(--gtx-danger);
    border-color: var(--gtx-danger);
}

.gtx-btn--danger:hover {
    background: var(--gtx-danger);
    color: var(--gtx-on-ember);
}

.gtx-btn__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* Loading: hide the icon, show the spinner; label stays (Sec. 6). */
.gtx-btn__spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: gtx-spin 0.7s linear infinite;
}

.gtx-btn.is-loading {
    pointer-events: none;
}

.gtx-btn.is-loading .gtx-btn__icon {
    display: none;
}

.gtx-btn.is-loading .gtx-btn__spinner {
    display: inline-block;
}

@keyframes gtx-spin {
    to { transform: rotate(360deg); }
}