/*
 * .btn — shadcn-style button
 *
 * Variants: default, outline, secondary, ghost, destructive, success, warning, link
 * Sizes:    sm, default, lg, icon
 *
 * Loading state: add class `btn-loading` + nested <svg class="spinner">.
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    white-space: nowrap;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-weight: 500;
    font-size: var(--text-sm);
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--duration-normal) var(--ease-in-out),
        color var(--duration-normal) var(--ease-in-out),
        border-color var(--duration-normal) var(--ease-in-out),
        box-shadow var(--duration-normal) var(--ease-in-out);
    user-select: none;
    text-decoration: none;
    padding: 0 var(--space-4);
    height: var(--space-10);
}

.btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px var(--color-background),
        0 0 0 4px var(--color-ring);
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.5;
    pointer-events: none;
}

/* ─── Variants ─────────────────────────────────────── */
.btn-default,
.btn:not([class*="btn-"]) {
    background-color: var(--color-primary);
    color: var(--color-primary-foreground);
}
.btn-default:hover,
.btn:not([class*="btn-"]):hover {
    background-color: color-mix(in oklch, var(--color-primary) 90%, transparent);
}

.btn-outline {
    background-color: var(--color-background);
    color: var(--color-foreground);
    border-color: var(--color-border);
}
.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-foreground);
}

.btn-secondary {
    background-color: var(--color-secondary);
    color: var(--color-secondary-foreground);
}
.btn-secondary:hover {
    background-color: color-mix(in oklch, var(--color-secondary) 80%, var(--color-foreground) 10%);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-foreground);
}
.btn-ghost:hover {
    background-color: var(--color-accent);
    color: var(--color-accent-foreground);
}

.btn-destructive {
    background-color: var(--color-destructive);
    color: var(--color-destructive-foreground);
}
.btn-destructive:hover {
    background-color: color-mix(in oklch, var(--color-destructive) 88%, black 12%);
}

.btn-success {
    background-color: var(--color-success);
    color: var(--color-success-foreground);
}
.btn-success:hover {
    background-color: color-mix(in oklch, var(--color-success) 88%, black 12%);
}

.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-warning-foreground);
}
.btn-warning:hover {
    background-color: color-mix(in oklch, var(--color-warning) 88%, black 12%);
}

.btn-link {
    background-color: transparent;
    color: var(--color-primary);
    height: auto;
    padding: 0;
    text-underline-offset: 4px;
}
.btn-link:hover {
    text-decoration: underline;
}

/* ─── Sizes ────────────────────────────────────────── */
.btn-sm {
    height: var(--space-8);
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
}

.btn-lg {
    height: var(--space-12);
    padding: 0 var(--space-6);
    font-size: var(--text-base);
}

.btn-icon {
    height: var(--space-10);
    width:  var(--space-10);
    padding: 0;
}

.btn-icon.btn-sm {
    height: var(--space-8);
    width:  var(--space-8);
}

.btn-icon.btn-lg {
    height: var(--space-12);
    width:  var(--space-12);
}

/* ─── Icon slot inside button ──────────────────────── */
.btn > svg,
.btn > [data-icon] {
    flex-shrink: 0;
    width:  var(--space-4);
    height: var(--space-4);
}

.btn-sm > svg,
.btn-sm > [data-icon] {
    width:  var(--space-3-5);
    height: var(--space-3-5);
}

/* ─── Loading state ────────────────────────────────── */
.btn-loading {
    pointer-events: none;
}

.btn-loading > .spinner {
    animation: btn-spin 0.6s linear infinite;
}

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

/* ─── Full-width modifier ──────────────────────────── */
.btn-block {
    width: 100%;
}