@use '../abstracts/mixins' as *;

.btn {
    --btn-bg: var(--color-primary);
    --btn-fg: var(--color-primary-contrast);
    --btn-border: transparent;
    --btn-hover-bg: var(--color-primary-hover);
    --btn-active-bg: var(--color-primary-active);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.55rem 1rem;
    font-weight: 500;
    font-size: var(--fs-sm);
    line-height: 1.2;
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    cursor: pointer;
    transition: background 120ms ease, transform 60ms ease, box-shadow 120ms ease;
    text-decoration: none;

    &:hover:not(:disabled) { background: var(--btn-hover-bg); }
    &:active:not(:disabled) { background: var(--btn-active-bg); transform: translateY(1px); }
    &:focus-visible { @include focus-ring; }
    &:disabled, &.is-loading { opacity: .65; cursor: not-allowed; }

    &.btn-sm { padding: 0.35rem .7rem; font-size: var(--fs-xs); }
    &.btn-xs { padding: 0.2rem .5rem; font-size: var(--fs-xs); border-radius: var(--radius-sm); }
    &.btn-lg { padding: 0.8rem 1.2rem; font-size: var(--fs-md); }

    &.btn-secondary { --btn-bg: var(--color-surface-alt); --btn-fg: var(--color-text); --btn-hover-bg: #E2E8F0; }
    &.btn-success   { --btn-bg: var(--color-success); --btn-hover-bg: #15803D; --btn-active-bg: #166534; }
    &.btn-danger    { --btn-bg: var(--color-danger);  --btn-hover-bg: #B91C1C; --btn-active-bg: #991B1B; }
    &.btn-warning   { --btn-bg: var(--color-warning); --btn-hover-bg: #B45309; --btn-active-bg: #92400E; --btn-fg: #fff; }
    &.btn-info      { --btn-bg: var(--color-info);    --btn-hover-bg: #0284C7; --btn-active-bg: #075985; --btn-fg: #fff; }

    &.btn-ghost {
        --btn-bg: transparent; --btn-fg: var(--color-text);
        --btn-hover-bg: var(--color-surface-alt);
    }
    &.btn-outline-primary,
    &.btn-outline-secondary {
        --btn-bg: transparent;
        --btn-fg: var(--color-text);
        --btn-border: var(--color-border-strong);
        --btn-hover-bg: var(--color-surface-alt);
    }
    &.btn-link {
        --btn-bg: transparent; --btn-fg: var(--color-primary);
        --btn-hover-bg: transparent;
        padding: 0; text-decoration: underline;
    }

    &__spinner {
        width: 0.9em; height: 0.9em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: btn-spin .8s linear infinite;
    }
    &__icon { display: inline-flex; align-items: center; }
}

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