/* ==============================================
   BUTTONS COMPONENT (LiftKit Golden Ratio System)
   ============================================== */

.btn {
    /* 1. LiftKit Golden Ratio Constants */
    --phi: 1.618034;
    --phi-sq: 2.618034;
    --sqrt-phi: 1.27202;

    /* 2. Base Scale (Anchored to rem) */
    font-size: 1rem;
    /* 16px default */
    line-height: var(--sqrt-phi);

    /* 3. Padding Calculations (Uses 'em' to scale perfectly) */
    --pad-v: calc((var(--sqrt-phi) / var(--phi-sq)) * 1em);
    --pad-h: 1em;
    --pad-reduced: calc(1em / var(--phi));

    /* 4. Local Theme Variables (Defaults) */
    --btn-bg: var(--bg-secondary);
    --btn-text: var(--text-primary);
    --btn-border: var(--border-color);

    --btn-bg-hover: var(--bg-tertiary);
    --btn-text-hover: var(--text-primary);
    --btn-border-hover: var(--border-color);

    /* 5. Core Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--pad-v) var(--pad-h);
    gap: var(--pad-reduced);

    /* 6. Base Aesthetics */
    background-color: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-buttons);
    font-family: var(--font-primary, sans-serif);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--transition-fast, 0.2s),
        color var(--transition-fast, 0.2s),
        border-color var(--transition-fast, 0.2s),
        transform var(--transition-fast, 0.2s);
}

.btn[hidden] {
    display: none;
}

.save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary, sans-serif);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        opacity var(--transition-fast),
        transform var(--transition-fast);
}

.save-button[hidden] {
    display: none;
}

/* Base SVGs automatically map to font size */
.btn svg,
.btn img {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

.more-icon {
    display: block;
    object-fit: contain;
    filter: invert(1);
    transition: filter var(--transition-fast);
}

.more-icon--inline {
    width: 1em;
    height: 1em;
}

.more-icon--standalone {
    width: var(--text-base);
    height: var(--text-base);
}

.btn .more-icon--inline,
.btn .more-icon--standalone {
    flex-shrink: 0;
}

.btn .more-icon--inline {
    width: 1em;
    height: 1em;
}

.btn .more-icon--standalone {
    width: 20px;
    height: 20px;
}

/* ==============================================
   MODIFIERS (Layout & Icons - Auto Detecting)
   ============================================== */

/* Auto-reduce left padding if an SVG is the first element */
.btn:has(> svg:first-child):not(.btn-icon) {
    padding-left: var(--pad-reduced);
}

/* Auto-reduce right padding if an SVG is the last element */
.btn:has(> svg:last-child):not(.btn-icon) {
    padding-right: var(--pad-reduced);
}

/* Icon-only button (Perfect circle, no text) */
.btn-icon,
.btn-svg {
    padding: var(--pad-v);
    aspect-ratio: 1;
    border-radius: 50%;
    border: none;
    background-color: transparent;
}

/* Plain utility icon/text buttons for info/help affordances. */
.btn-icon-plain {
    --btn-bg: transparent;
    --btn-text: var(--text-primary);
    --btn-border: transparent;
    --btn-bg-hover: transparent;
    --btn-text-hover: var(--text-primary);
    --btn-border-hover: transparent;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 0;
    line-height: 1;
}

/* Full width utility */
.btn-full {
    width: 100%;
}

/* Size modifiers preserve the LiftKit math by changing only font size. */
.btn-compact {
    font-size: var(--text-sm);
}

.btn-list-cta {
    --btn-bg: var(--bg-secondary);
    --btn-text: var(--text-primary);
    --btn-border: var(--border-color);
    --btn-bg-hover: var(--bg-tertiary);
    --btn-text-hover: var(--text-primary);
    --btn-border-hover: var(--border-color);
    width: 100%;
    justify-content: space-between;
    padding: var(--space-md);
    border-radius: var(--radius-standard);
    white-space: normal;
}

.btn-list-cta__label {
    min-width: 0;
    text-align: left;
}

.btn-list-cta__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-regular);
}

.btn-sm,
.btn-small {
    font-size: var(--text-xs);
}

.btn-md,
.btn-medium {
    font-size: var(--text-sm);
}

.btn-large {
    font-size: calc(var(--text-base) * 1.125);
}

/* ==============================================
   VARIANTS (Colors & Theming)
   ============================================== */

/* Primary Action */
.btn-secondary {
    --btn-bg: var(--bg-secondary);
    --btn-text: var(--text-primary);
    --btn-border: var(--border-color);

    --btn-bg-hover: var(--bg-tertiary);
    --btn-text-hover: var(--text-primary);
    --btn-border-hover: var(--border-color);
}

/* Primary Action */
.btn-primary {
    --btn-bg: var(--text-primary);
    --btn-text: var(--bg-primary);
    --btn-border: var(--text-primary);

    --btn-bg-hover: var(--text-primary);
    --btn-text-hover: var(--bg-primary);
    --btn-border-hover: var(--text-primary);
}

/* Accent Action */
.btn-accent {
    --btn-bg: var(--surface-info-bg);
    --btn-text: var(--surface-info-text);
    --btn-border: transparent;

    --btn-bg-hover: var(--surface-info-bg);
    --btn-text-hover: var(--surface-info-text);
    --btn-border-hover: transparent;
}

/* Ghost Action */
.btn-ghost {
    --btn-bg: transparent;
    --btn-border: transparent;

    --btn-bg-hover: var(--bg-tertiary);
    --btn-border-hover: transparent;
}

/* Danger Action */
.btn-danger {
    --btn-bg: var(--surface-error-bg);
    --btn-text: var(--surface-error-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-error-bg);
    --btn-text-hover: var(--surface-error-text);
    --btn-border-hover: transparent;
}

/* Warning Action */
.btn-warning {
    --btn-bg: var(--surface-warning-bg);
    --btn-text: var(--surface-warning-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-warning-bg);
    --btn-text-hover: var(--surface-warning-text);
    --btn-border-hover: transparent;
}

/* Success Action */
.btn-success {
    --btn-bg: var(--surface-success-bg);
    --btn-text: var(--surface-success-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-success-bg);
    --btn-text-hover: var(--surface-success-text);
    --btn-border-hover: transparent;
}

/* Light-surface buttons keep the shared inverse treatment on dark screens. */
.btn-light,
.btn-google,
.btn-apple {
    --btn-bg: var(--text-primary);
    --btn-text: var(--bg-primary);
    --btn-border: var(--text-primary);

    --btn-bg-hover: var(--text-primary);
    --btn-text-hover: var(--bg-primary);
    --btn-border-hover: var(--text-primary);
}

.auth-provider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    font-size: 20px;
    line-height: 1;
}

/* ==============================================
   STATES (Hover, Active, Disabled, Loading)
   ============================================== */

/* Unified Hover State based on Local Variables */
.btn:hover:not(:disabled) {
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
    border-color: var(--btn-border-hover);
}

.btn:focus-visible {
    outline: none;
    background-color: var(--btn-bg-hover);
    color: var(--btn-text-hover);
    border-color: var(--btn-border-hover);
}

.save-button:hover:not(:disabled),
.save-button:focus-visible {
    outline: none;
    color: var(--text-primary);
}

.btn.active,
.btn.selected {
    --btn-bg: var(--text-primary);
    --btn-text: var(--bg-primary);
    --btn-border: transparent;
    --btn-bg-hover: var(--text-primary);
    --btn-text-hover: var(--bg-primary);
    --btn-border-hover: transparent;
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border-color: transparent;
}

.btn:is(.active, .selected) .more-icon {
    filter: none;
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
    /* Slight click feedback */
}

.save-button:active:not(:disabled) {
    transform: translateY(1px);
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(50%);
    transform: none;
}

.save-button:disabled,
.save-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.btn.is-loading {
    position: relative;
    color: transparent !important;
    /* Hides text without shifting layout */
    pointer-events: none;
}

.btn.is-loading::after {
    content: "";
    position: absolute;
    width: 1.2em;
    height: 1.2em;
    border: 0.15em solid var(--btn-text);
    /* Auto-matches current variant color */
    border-right-color: transparent;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: btn-spin 0.75s linear infinite;
}

/* Status buttons */
.btn-status {
    --btn-bg: var(--bg-secondary);
    --btn-text: var(--text-primary);
    --btn-border: var(--border-color);
    --btn-bg-hover: var(--bg-tertiary);
    --btn-text-hover: var(--text-primary);
    --btn-border-hover: var(--border-color);
}

.btn-status:disabled {
    opacity: 1;
    filter: none;
}

.btn-status__content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pad-reduced);
    min-width: 0;
    transition: opacity var(--transition-fast);
}

.btn-status__content.is-updating {
    opacity: 0;
}

.btn-status__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}

.btn-status__icon:empty {
    display: none;
}

.btn-status__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.btn-status__icon svg:not(.btn-status__spinner) {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

.btn-status__icon .btn-status__icon-check {
    fill: currentColor;
    stroke: none;
}

.btn-status__spinner {
    animation: btn-status-spin 0.75s linear infinite;
}

.btn-status__label {
    min-width: 0;
}

.btn-status--idle {
    --btn-bg: var(--bg-secondary);
    --btn-text: var(--text-primary);
    --btn-border: var(--border-color);
    --btn-bg-hover: var(--bg-tertiary);
    --btn-text-hover: var(--text-primary);
    --btn-border-hover: var(--border-color);
}

.btn-status--checking {
    --btn-bg: var(--bg-secondary);
    --btn-text: var(--text-muted);
    --btn-border: var(--border-color);
    --btn-bg-hover: var(--bg-secondary);
    --btn-text-hover: var(--text-muted);
    --btn-border-hover: var(--border-color);
}

.btn-status--success {
    --btn-bg: var(--surface-success-bg);
    --btn-text: var(--surface-success-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-success-bg);
    --btn-text-hover: var(--surface-success-text);
    --btn-border-hover: transparent;
}

.btn-status--update-available {
    --btn-bg: var(--surface-info-bg);
    --btn-text: var(--surface-info-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-info-bg);
    --btn-text-hover: var(--surface-info-text);
    --btn-border-hover: transparent;
}

.btn-status--error {
    --btn-bg: var(--surface-error-bg);
    --btn-text: var(--surface-error-text);
    --btn-border: transparent;
    --btn-bg-hover: var(--surface-error-bg);
    --btn-text-hover: var(--surface-error-text);
    --btn-border-hover: transparent;
}

@keyframes btn-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes btn-status-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn-status__content {
        transition: none;
    }

    .btn-status__spinner {
        animation: none;
    }
}