/* =========================================
   button.css
========================================= */

/* ==========================
    Base Button
========================== */

button{

    font-family:inherit;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:100px;

    height:40px;

    padding:0 18px;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.2s;

    user-select:none;

    text-decoration:none;

}

/* ==========================
    Hover
========================== */

.btn:hover{

    transform:translateY(-1px);

    box-shadow:

        0 6px 14px rgba(0,0,0,.08);

}

/* ==========================
    Active
========================== */

.btn:active{

    transform:translateY(0);

}

/* ==========================
    Disabled
========================== */

.btn:disabled{

    opacity:.55;

    cursor:not-allowed;

    box-shadow:none;

    transform:none;

}

/* ==========================
    Primary
========================== */

.btn-primary{

    background:#2563eb;

    color:white;

}

.btn-primary:hover{

    background:#1d4ed8;

}

/* ==========================
    Success
========================== */

.btn-success{

    background:#16a34a;

    color:white;

}

.btn-success:hover{

    background:#15803d;

}

/* ==========================
    Warning
========================== */

.btn-warning{

    background:#f59e0b;

    color:white;

}

.btn-warning:hover{

    background:#d97706;

}

/* ==========================
    Danger
========================== */

.btn-danger{

    background:#dc2626;

    color:white;

}

.btn-danger:hover{

    background:#b91c1c;

}

/* ==========================
    Secondary
========================== */

.btn-secondary{

    background:#64748b;

    color:white;

}

.btn-secondary:hover{

    background:#475569;

}

/* ==========================
    Outline
========================== */

.btn-outline{

    background:white;

    border:1px solid #dbe3ec;

    color:#374151;

}

.btn-outline:hover{

    background:#f8fafc;

}

/* ==========================
    Small
========================== */

.btn-small{

    height:32px;

    min-width:auto;

    padding:0 12px;

    font-size:12px;

}

/* ==========================
    Large
========================== */

.btn-large{

    height:46px;

    padding:0 28px;

    font-size:15px;

}

/* ==========================
    Icon Button
========================== */

.btn-icon{

    width:40px;

    height:40px;

    min-width:40px;

    padding:0;

}

/* ==========================
    Toolbar
========================== */

.toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.toolbar-left,

.toolbar-right{

    display:flex;

    gap:12px;

    align-items:center;

}

/* ==========================
    Button Group
========================== */

.btn-group{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}

/* ==========================
    Refresh Animation
========================== */

.btn-refresh.loading{

    pointer-events:none;

}

.btn-refresh.loading i{

    animation:spin 1s linear infinite;

}

/* ==========================
    Spinner
========================== */

.spinner{

    width:16px;

    height:16px;

    border-radius:50%;

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

    border-top-color:white;

    animation:spin .8s linear infinite;

}

/* ==========================
    Animation
========================== */

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ==========================
    Responsive
========================== */

@media (max-width:768px){

    .toolbar{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .toolbar-right{

        width:100%;

        flex-wrap:wrap;

    }

    .btn{

        width:100%;

    }

}