/* Base Button */

.sf--btn{
    font-size: 14px;
    padding: 12px 18px;
    font-family: 'Onest', sans-serif;
    font-weight: 400;
    letter-spacing: -0.2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: uppercase;
    border-radius: 36px;
    line-height: 20px;
    transition: all 150ms ease-out;
}

/* Variants */

/* 1. Primary */
.sf-btn--primary{
    background: #4D30FF !important;
    box-shadow: 0 8.455px 28.182px 0 rgba(77, 48, 255, 0.00) !important;
    color: #ffffff !important;
}
.sf-btn--primary:hover{
    background: linear-gradient(180deg, #4D30FF 52%, #3C1BAE 100%) !important;
    box-shadow: 0 11.273px 31px 0 rgba(77, 48, 255, 0.00) !important;
}
.sf-btn--primary:active{
    transform: scale(0.96);
}
.sf-btn--primary:focus-visible{
    box-shadow: 0 8.455px 28.182px 0 rgba(77, 48, 255, 0.00) !important;
    border: 2px solid #D2CBFF !important;
}

/* 2. Secondary */
.sf-btn--secondary{
    border: 2px solid #262626;
    color: #262626 !important;
}
.sf-btn--secondary:hover{
    border: 2px solid #4D30FF !important;
    background: rgba(77, 48, 255, 0.02);
    box-shadow: none !important;
    color: #4D30FF !important;
}
.sf-btn--secondary:active{
    border: 2px solid #2909F7;
    background: rgba(77, 48, 255, 0.02) !important;
    box-shadow: none !important;
    transform: scale(0.96);
}
.sf-btn--secondary:focus-visible{
    color: #050209 !important;
    border: 2px solid #050209 !important;
    background: rgba(255, 255, 255, 0.01) !important;
    box-shadow: 0 0 1px 3px rgba(77, 48, 255, 0.25) !important;
}


/* Sizes */
/* 1. Small */
.sf-btn--sm{
    font-size: 14px !important;
    line-height: 16px !important;
    padding: 10px 16px !important;
}

/* Responsiveness */
@media (min-width: 768px){
    .sf--btn{
        font-size: 16px !important;
        padding: 16px 24px !important;
    }

    .sf-btn--sm{
        font-size: 14px !important;
        line-height: 16px !important;
        padding: 10px 18px !important;
    }
}

@media (min-width: 1024px){
    .sf--btn{
        font-size: 18px !important;
        padding: 18px 24px !important;
    }

    .sf-btn--sm{
        font-size: 16px !important;
        line-height: 16px !important;
        padding: 12px 20px !important;
    }
}