/* =====================================================
SPI UI
File        : button.css
Component   : Button
Version     : 1.1.0
Author      : StudioProjectID
===================================================== */


/* =====================================================
BASE BUTTON
===================================================== */

.spi-btn {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    min-height: 44px;

    padding: 0 20px;

    border: 1px solid transparent;

    border-radius:
        var(--spi-radius-md, 12px);

    cursor: pointer;

    user-select: none;

    white-space: nowrap;

    text-decoration: none;

    font-family: inherit;

    font-size: 13px;

    line-height: 1;

    font-weight: 650;

    letter-spacing: -0.005em;

    -webkit-tap-highlight-color: transparent;

    transition:
        transform 0.22s cubic-bezier(.22, 1, .36, 1),
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.22s ease;
}


/* =====================================================
HOVER
===================================================== */

.spi-btn:hover {
    transform: translateY(-1px);
}


/* =====================================================
ACTIVE
===================================================== */

.spi-btn:active {
    transform: translateY(0) scale(.985);
}


/* =====================================================
FOCUS
===================================================== */

.spi-btn:focus {
    outline: none;
}

.spi-btn:focus-visible {
    outline: 3px solid rgba(34, 197, 94, .18);

    outline-offset: 2px;
}


/* =====================================================
DISABLED
===================================================== */

.spi-btn:disabled,
.spi-btn.spi-disabled {
    opacity: .5;

    cursor: not-allowed;

    pointer-events: none;

    transform: none !important;

    box-shadow: none !important;
}


/* =====================================================
PRIMARY
SPI SIGNATURE
===================================================== */

.spi-btn-primary {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #22c55e 0%,
            #16b968 45%,
            #0ea5e9 100%
        );

    border-color:
        rgba(34, 197, 94, .15);

    box-shadow:
        0 5px 14px rgba(34, 197, 94, .14);
}


.spi-btn-primary:hover {

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #16b968 0%,
            #14b866 45%,
            #0284c7 100%
        );

    border-color:
        rgba(34, 197, 94, .25);

    box-shadow:
        0 8px 22px rgba(34, 197, 94, .20);
}


.spi-btn-primary:active {

    box-shadow:
        0 3px 8px rgba(34, 197, 94, .12);
}


/* =====================================================
SECONDARY
===================================================== */

.spi-btn-secondary {

    color:
        var(--spi-text, #334155);

    background:
        #f8fafc;

    border-color:
        var(--spi-border, #e2e8f0);

    box-shadow:
        0 2px 5px rgba(15, 23, 42, .025);
}


.spi-btn-secondary:hover {

    color:
        var(--spi-text, #0f172a);

    background:
        #ffffff;

    border-color:
        #cbd5e1;

    box-shadow:
        0 6px 16px rgba(15, 23, 42, .06);
}


/* =====================================================
SUCCESS
===================================================== */

.spi-btn-success {

    color: #fff;

    background:
        #16a34a;

    border-color:
        rgba(22, 163, 74, .15);

    box-shadow:
        0 5px 14px rgba(22, 163, 74, .12);
}


.spi-btn-success:hover {

    color: #fff;

    background:
        #15803d;

    box-shadow:
        0 8px 20px rgba(22, 163, 74, .18);
}


/* =====================================================
WARNING
===================================================== */

.spi-btn-warning {

    color: #fff;

    background:
        #f59e0b;

    border-color:
        rgba(245, 158, 11, .15);

    box-shadow:
        0 5px 14px rgba(245, 158, 11, .12);
}


.spi-btn-warning:hover {

    color: #fff;

    background:
        #d97706;

    box-shadow:
        0 8px 20px rgba(245, 158, 11, .18);
}


/* =====================================================
DANGER
===================================================== */

.spi-btn-danger {

    color: #fff;

    background:
        #ef4444;

    border-color:
        rgba(239, 68, 68, .15);

    box-shadow:
        0 5px 14px rgba(239, 68, 68, .10);
}


.spi-btn-danger:hover {

    color: #fff;

    background:
        #dc2626;

    box-shadow:
        0 8px 20px rgba(239, 68, 68, .16);
}


/* =====================================================
INFO
===================================================== */

.spi-btn-info {

    color: #fff;

    background:
        #0ea5e9;

    border-color:
        rgba(14, 165, 233, .15);

    box-shadow:
        0 5px 14px rgba(14, 165, 233, .12);
}


.spi-btn-info:hover {

    color: #fff;

    background:
        #0284c7;

    box-shadow:
        0 8px 20px rgba(14, 165, 233, .18);
}


/* =====================================================
OUTLINE
===================================================== */

.spi-btn-outline {

    color:
        var(--spi-text, #334155);

    background:
        rgba(255, 255, 255, .85);

    border:
        1px solid
        var(--spi-border, #e2e8f0);

    box-shadow:
        0 2px 5px rgba(15, 23, 42, .02);
}


.spi-btn-outline:hover {

    color:
        #15803d;

    background:
        #f0fdf4;

    border-color:
        rgba(34, 197, 94, .35);

    box-shadow:
        0 6px 16px rgba(34, 197, 94, .07);
}


/* =====================================================
GHOST
===================================================== */

.spi-btn-ghost {

    color:
        var(--spi-text-secondary, #64748b);

    background:
        transparent;

    border-color:
        transparent;

    box-shadow:
        none;
}


.spi-btn-ghost:hover {

    color:
        var(--spi-primary, #16a34a);

    background:
        #f0fdf4;

    border-color:
        rgba(34, 197, 94, .08);
}


/* =====================================================
LIGHT
===================================================== */

.spi-btn-light {

    color:
        #334155;

    background:
        #f8fafc;

    border-color:
        #f1f5f9;
}


.spi-btn-light:hover {

    color:
        #0f172a;

    background:
        #f1f5f9;

    border-color:
        #e2e8f0;
}


/* =====================================================
SOFT PRIMARY
===================================================== */

.spi-btn-soft-primary {

    color:
        #15803d;

    background:
        #f0fdf4;

    border-color:
        rgba(34, 197, 94, .10);
}


.spi-btn-soft-primary:hover {

    color:
        #166534;

    background:
        #dcfce7;

    border-color:
        rgba(34, 197, 94, .18);
}


/* =====================================================
SIZE - SMALL
===================================================== */

.spi-btn-sm {

    min-height: 36px;

    padding:
        0 14px;

    border-radius:
        10px;

    font-size: 12px;

    gap: 7px;
}


/* =====================================================
SIZE - DEFAULT
===================================================== */

.spi-btn-md {

    min-height: 44px;

    padding:
        0 20px;

    font-size: 13px;
}


/* =====================================================
SIZE - LARGE
===================================================== */

.spi-btn-lg {

    min-height: 52px;

    padding:
        0 26px;

    border-radius:
        14px;

    font-size: 14px;

    gap: 10px;
}


/* =====================================================
BLOCK
===================================================== */

.spi-btn-block {

    width: 100%;
}


/* =====================================================
PILL
===================================================== */

.spi-btn-pill {

    border-radius: 999px;
}


/* =====================================================
ROUND
===================================================== */

.spi-btn-round {

    border-radius: 999px;
}


/* =====================================================
ICON BUTTON
===================================================== */

.spi-btn-icon {

    width: 44px;

    height: 44px;

    min-height: 44px;

    padding: 0;

    gap: 0;

    border-radius: 12px;
}


/* =====================================================
ICON BUTTON - SMALL
===================================================== */

.spi-btn-icon.spi-btn-sm {

    width: 36px;

    height: 36px;

    min-height: 36px;

    padding: 0;

    border-radius: 10px;
}


/* =====================================================
ICON BUTTON - LARGE
===================================================== */

.spi-btn-icon.spi-btn-lg {

    width: 52px;

    height: 52px;

    min-height: 52px;

    padding: 0;

    border-radius: 14px;
}


/* =====================================================
ICON
===================================================== */

.spi-btn i,
.spi-btn svg {

    width: 17px;

    height: 17px;

    flex-shrink: 0;
}


.spi-btn-sm i,
.spi-btn-sm svg {

    width: 15px;

    height: 15px;
}


.spi-btn-lg i,
.spi-btn-lg svg {

    width: 19px;

    height: 19px;
}


/* =====================================================
ICON ANIMATION
===================================================== */

.spi-btn:hover svg {

    transition:
        transform .22s cubic-bezier(.22, 1, .36, 1);
}


.spi-btn-icon:hover svg {

    transform:
        scale(1.06);
}


/* =====================================================
ARROW BUTTON
===================================================== */

.spi-btn-arrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.spi-btn-arrow svg {

    transition:
        transform .22s cubic-bezier(.22, 1, .36, 1);
}


.spi-btn-arrow:hover svg {

    transform:
        translateX(3px);
}


/* =====================================================
LOADING
===================================================== */

.spi-btn-loading {

    pointer-events: none;

    cursor: wait;

    opacity: .82;
}


/* Hide text visually while preserving button dimensions */

.spi-btn-loading .spi-btn-text {

    opacity: .75;
}


/* =====================================================
LOADING SPINNER
===================================================== */

.spi-btn-loading::after {

    content: "";

    width: 15px;

    height: 15px;

    flex-shrink: 0;

    margin-left: 2px;

    border:
        2px solid
        rgba(255, 255, 255, .35);

    border-top-color:
        #fff;

    border-radius: 50%;

    animation:
        spiButtonLoading .75s linear infinite;
}


/* Dark spinner for light buttons */

.spi-btn-outline.spi-btn-loading::after,
.spi-btn-secondary.spi-btn-loading::after,
.spi-btn-ghost.spi-btn-loading::after,
.spi-btn-light.spi-btn-loading::after,
.spi-btn-soft-primary.spi-btn-loading::after {

    border-color:
        rgba(15, 23, 42, .12);

    border-top-color:
        currentColor;
}


/* =====================================================
LOADING ANIMATION
===================================================== */

@keyframes spiButtonLoading {

    to {

        transform:
            rotate(360deg);

    }

}


/* =====================================================
BUTTON GROUP
===================================================== */

.spi-btn-group {

    display: inline-flex;

    align-items: center;

    gap: 8px;
}


.spi-btn-group > .spi-btn {

    flex-shrink: 0;
}


/* =====================================================
FULL BUTTON GROUP
===================================================== */

.spi-btn-group-block {

    display: flex;

    width: 100%;

    gap: 10px;
}


.spi-btn-group-block > .spi-btn {

    flex: 1;
}


/* =====================================================
DANGER OUTLINE
===================================================== */

.spi-btn-outline-danger {

    color:
        #dc2626;

    background:
        #fff;

    border-color:
        #fecaca;
}


.spi-btn-outline-danger:hover {

    color:
        #b91c1c;

    background:
        #fef2f2;

    border-color:
        #fca5a5;
}


/* =====================================================
SUCCESS OUTLINE
===================================================== */

.spi-btn-outline-success {

    color:
        #15803d;

    background:
        #fff;

    border-color:
        #bbf7d0;
}


.spi-btn-outline-success:hover {

    color:
        #166534;

    background:
        #f0fdf4;

    border-color:
        #86efac;
}


/* =====================================================
MOBILE
===================================================== */

@media (max-width: 640px) {

    .spi-btn {

        min-height: 42px;

        padding:
            0 17px;

        font-size: 13px;
    }

    .spi-btn-lg {

        min-height: 48px;

        padding:
            0 21px;
    }

    .spi-btn-group-block {

        flex-direction: column;
    }

    .spi-btn-group-block > .spi-btn {

        width: 100%;
    }

}


/* =====================================================
REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .spi-btn,
    .spi-btn svg {

        transition: none !important;
    }

    .spi-btn:hover {

        transform: none;
    }

    .spi-btn-loading::after {

        animation: none;
    }

}