/* ==========================================================
   SYLFOW MARKET
   BUTTONS
========================================================== */

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

.sf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;

    padding: .90rem 1.60rem;

    border: none;
    border-radius: var(--sf-radius-pill);

    font-family: var(--sf-font);
    font-size: .95rem;
    font-weight: var(--sf-fw-semibold);

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition: var(--sf-transition);
}

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

.sf-btn-primary {

    background: var(--sf-primary);

    color: var(--sf-white);

    box-shadow: var(--sf-shadow-sm);

}

.sf-btn-primary:hover {

    background: var(--sf-primary-dark);

    transform: translateY(-2px);

    box-shadow: var(--sf-shadow-md);

}

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

.sf-btn-secondary {

    background: var(--sf-secondary);

    color: var(--sf-white);

}

.sf-btn-secondary:hover {

    filter: brightness(.95);

    transform: translateY(-2px);

}

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

.sf-btn-outline {

    background: transparent;

    border: 2px solid var(--sf-primary);

    color: var(--sf-primary);

}

.sf-btn-outline:hover {

    background: var(--sf-primary);

    color: var(--sf-white);

}

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

.sf-btn-light {

    background: var(--sf-white);

    color: var(--sf-text);

    border: 1px solid var(--sf-border);

}

.sf-btn-light:hover {

    box-shadow: var(--sf-shadow-sm);

    transform: translateY(-2px);

}

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

.sf-btn-success {

    background: var(--sf-success);

    color: var(--sf-white);

}

.sf-btn-success:hover {

    filter: brightness(.95);

}

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

.sf-btn-danger {

    background: var(--sf-danger);

    color: var(--sf-white);

}

.sf-btn-danger:hover {

    filter: brightness(.95);

}

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

.sf-btn-warning {

    background: var(--sf-warning);

    color: var(--sf-white);

}

.sf-btn-warning:hover {

    filter: brightness(.95);

}

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

.sf-btn-icon {

    width: 46px;

    height: 46px;

    padding: 0;

    border-radius: 50%;

}

/* ==========================================================
   SIZES
========================================================== */

.sf-btn-sm {

    padding: .65rem 1rem;

    font-size: .85rem;

}

.sf-btn-lg {

    padding: 1rem 2rem;

    font-size: 1.05rem;

}

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

.sf-btn:disabled,
.sf-btn.disabled {

    opacity: .6;

    cursor: not-allowed;

    transform: none;

    box-shadow: none;

}

/* ==========================================================
   FULL WIDTH
========================================================== */

.sf-btn-block {

    width: 100%;

}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:768px){

    .sf-btn{

        width:100%;

        justify-content:center;

    }

}