.btn-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    row-gap: 8px;
    border-radius: 64px;
    border: 1px solid;
}
.btn-text-lg {
    font-size: 16px;
    font-weight: 500;
    font-family: 'Nunito';
    text-align: center;
}
.btn-text-sm {
    font-size: 12px;
    font-weight: 500;
    font-family: 'Nunito';
    text-align: center;
}
.btn-size-xs{
    padding: 4px 16px;
}
.btn-size-sm{
    padding: 14px 32px;
}
.btn-size-lg{
    padding: 12px 32px;
}
.btn-size-svg{
    width: 20px;
    height: 20px;
}
/* Primary Buttons Light */
/* resting */
.btn-Primarylight-resting{
    background: var(--Light-Gradient);
    border-color: var(--Light-Gradient);
    color: var(--Gray-Not-White);
}
.btn-Primarylight-resting-out-line{
    border-color: var(--Primary-Blue-500);
    color: var(--Primary-Blue-500);
}
/* loading */
.btn-Primarylight-loading{
    background: var(--Light-Gradient);
    border-color: var(--Light-Gradient);
    color: var(--Gray-Not-White);
}
.btn-Primarylight-loading-out-line{
    border-color: var(--Primary-Blue-500);
    color: var(--Primary-Blue-500);
}
/* hover */
.btn-Primarylight-hover{
    background: var(--Secondary-Yellow-500);
    border-color: var(--Secondary-Yellow-500);
    color: var(--Gray-Not-Black);
}
.btn-Primarylight-hover-out-line{
    border-color: var(--Primary-Blue-600);
    color: var(--Primary-Blue-600);
}
/* pressed */
.btn-Primarylight-pressed{
    background: var(--Primary-Blue-600);
    border-color: var(--Primary-Blue-600);
    color: var(--Gray-Not-White);
}
.btn-Primarylight-pressed-out-line{
    border-color: var(--Primary-Blue-600);
    color: var(--Primary-Blue-600);
}
/* Primary Buttons Dark */
/* resting */
.btn-PrimaryDark-resting{
    background: var(--Dark-Gradient);
    border-color: var(--Dark-Gradient);
    color: var(--Gray-Not-White);
}
.btn-PrimaryDark-resting-out-line{
    border-color: var(--Primary-Blue-400);
    color: var(--Primary-Blue-400);
}
/* loading */
.btn-PrimaryDark-loading{
    background: var(--Dark-Gradient);
    border-color: var(--Dark-Gradient);
    color: var(--Gray-Not-White);
}
.btn-PrimaryDark-loading-out-line{
    border-color: var(--Primary-Blue-400);
    color: var(--Primary-Blue-400);
}
/* hover */
.btn-PrimaryDark-hover{
    background: var(--Secondary-Yellow-500);
    border-color: var(--Secondary-Yellow-500);
    color: var(--Gray-Not-Black);
}
.btn-PrimaryDark-hover-out-line{
    border-color: var(--Primary-Blue-500);
    color: var(--Primary-Blue-500);
}
/* pressed */
.btn-PrimaryDark-pressed{
    background: var(--Primary-Blue-500);
    border-color: var(--Primary-Blue-500);
    color: var(--Gray-Not-White);
}
.btn-PrimaryDark-pressed-out-line{
    border-color: var(--Primary-Blue-500);
    color: var(--Primary-Blue-500);
}

/* Secondary Buttons Light */
/* resting */
.btn-SecondaryLight-resting{
    background: var(--Gray-Night);
    border-color: var(--Light-Gradient);
    color: var(--Gray-Not-White);
}
.btn-SecondaryLight-resting-out-line{
    border-color: var(--Primary-Blue-500);
    color: var(--Primary-Blue-500);
}
/* loading */
.btn-SecondaryLight-loading{
    background: var(--Light-Gradient);
    border-color: var(--Light-Gradient);
    color: var(--Gray-Not-White);
}
.btn-SecondaryLight-loading-out-line{
    border-color: var(--Primary-Blue-500);
    color: var(--Primary-Blue-500);
}
/* hover */
.btn-SecondaryLight-hover{
    background: var(--Gray-Gray-850);
    border-color: var(--Gray-Gray-850);
    color: var(--Gray-Not-White);
}
.btn-SecondaryLight-hover-out-line{
    border-color: var(--Gray-Gray-850);
    color: var(--Gray-Gray-850);
}
/* pressed */
.btn-SecondaryLight-pressed{
    background: var(--Gray-Gray-850);
    border-color: var(--Gray-Gray-850);
    color: var(--Gray-Not-White);
}
.btn-SecondaryLight-pressed-out-line{
    border-color: var(--Gray-Gray-850);
    color: var(--Gray-Gray-850);
}
/* Secondary Buttons Dark */
/* resting */
.btn-SecondaryDark-resting{
    background: var(--Gray-Gray-500);
    border-color: var(--Gray-Gray-500);
    color: var(--Gray-Not-Black);
}
.btn-SecondaryDark-resting-out-line{
    border-color: var(--Gray-Gray-500);
    color: var(--Gray-Gray-500);
}
/* loading */
.btn-SecondaryDark-loading{
    background: var(--Gray-Gray-500);
    border-color: var(--Gray-Gray-500);
    color: var(--Gray-Not-Black);
}
.btn-SecondaryDark-loading-out-line{
    border-color: var(--Gray-Gray-400);
    color: var(--Gray-Gray-400);
}
/* hover */
.btn-SecondaryDark-hover{
    background: var(--Gray-Gray-400);
    border-color: var(--Gray-Gray-400);
    color: var(--Gray-Not-Black);
}
.btn-SecondaryDark-hover-out-line{
    border-color: var(--Gray-Gray-500);
    color: var(--Gray-Gray-500);
}
/* pressed */
.btn-SecondaryDark-pressed{
    background:  var(--Gray-Gray-400);
    border-color:  var(--Gray-Gray-400);
    color: var(--Gray-Not-Black);
}
.btn-SecondaryDark-pressed-out-line{
    border-color: var(--Gray-Gray-500);
    color: var(--Gray-Gray-500);
}