.btn{
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    padding: 0.9375rem 1.125rem;
    background-color: var(--color-primary);
    color: white;
    font-size: 0.9375rem;
    width: fit-content;
}

.btn:hover{
    opacity: 0.8;
}

.btn.disabled{
    color: var(--color-gray);
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-200);
    pointer-events: none;
    cursor: default;
}

/* Button big */

.btn.big{
    padding: 1.125rem 1.75rem;
}

/* Icon */

.btn.btn-icon{
    box-shadow: var(--button-box-shadow);
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
}

.btn.btn-icon.reverse{
    flex-direction: row-reverse;
}

.btn.btn-icon::before{
    display: block;
    height: 1.125rem;
    width: auto;
    transition: var(--transition);
}

/* Tertiary */

.btn.tertiary{
    background-color: var(--color-tertiary);
    border-color: var(--color-tertiary);
}

.btn.tertiary:hover{
    color: var(--color-gray);
}

.btn.tertiary.disabled{
    background-color: var(--color-tertiary-100);
    border-color: var(--color-tertiary-100);
}
.btn.outline.btn-icon.disabled::before,
.btn.tertiary.btn-icon.disabled::before,
.btn.tertiary.btn-icon:hover::before{
    filter: brightness(0.5) grayscale(1);
}

/* Outline */

.btn.outline{
    background-color: white;
    color: var(--color-primary);
}

.btn.outline:hover{
    opacity: 1;
    color: white;
    background-color: var(--color-primary);
}

.btn.outline.disabled{
    border-color: var(--color-gray);
    color: var(--color-gray);
    background-color: var(--color-gray-100);
}

.btn.outline.btn-icon:hover::before{
    filter: brightness(0) invert(1);
}

/* Icons type, insert below */

.btn.btn-icon.icon-users::before{
    content: url('data:image/svg+xml,<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1667 15.25V13.6667C14.1667 12.8268 13.8155 12.0214 13.1904 11.4275C12.5653 10.8336 11.7174 10.5 10.8334 10.5H4.16671C3.28265 10.5 2.43481 10.8336 1.80968 11.4275C1.18456 12.0214 0.833374 12.8268 0.833374 13.6667V15.25M19.1667 15.25V13.6667C19.1662 12.965 18.9203 12.2834 18.4678 11.7289C18.0154 11.1744 17.3818 10.7783 16.6667 10.6029M13.3334 1.10292C14.0504 1.27732 14.6859 1.67347 15.1397 2.22891C15.5936 2.78435 15.8399 3.46749 15.8399 4.17063C15.8399 4.87376 15.5936 5.5569 15.1397 6.11234C14.6859 6.66778 14.0504 7.06393 13.3334 7.23833M10.8334 4.16667C10.8334 5.91557 9.34099 7.33333 7.50004 7.33333C5.65909 7.33333 4.16671 5.91557 4.16671 4.16667C4.16671 2.41776 5.65909 1 7.50004 1C9.34099 1 10.8334 2.41776 10.8334 4.16667Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.btn.outline.btn-icon.icon-users::before{
    content: url('data:image/svg+xml,<svg width="20" height="17" viewBox="0 0 20 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.1667 15.25V13.6667C14.1667 12.8268 13.8155 12.0214 13.1904 11.4275C12.5653 10.8336 11.7174 10.5 10.8334 10.5H4.16671C3.28265 10.5 2.43481 10.8336 1.80968 11.4275C1.18456 12.0214 0.833374 12.8268 0.833374 13.6667V15.25M19.1667 15.25V13.6667C19.1662 12.965 18.9203 12.2834 18.4678 11.7289C18.0154 11.1744 17.3818 10.7783 16.6667 10.6029M13.3334 1.10292C14.0504 1.27732 14.6859 1.67347 15.1397 2.22891C15.5936 2.78435 15.8399 3.46749 15.8399 4.17063C15.8399 4.87376 15.5936 5.5569 15.1397 6.11234C14.6859 6.66778 14.0504 7.06393 13.3334 7.23833M10.8334 4.16667C10.8334 5.91557 9.34099 7.33333 7.50004 7.33333C5.65909 7.33333 4.16671 5.91557 4.16671 4.16667C4.16671 2.41776 5.65909 1 7.50004 1C9.34099 1 10.8334 2.41776 10.8334 4.16667Z" stroke="%231593CA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

.btn.btn-icon.icon-ribbon::before{
    content: url('data:image/svg+xml,<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.6667 16L6.83333 11.8333L1 16V2.66667C1 2.22464 1.17559 1.80072 1.48816 1.48816C1.80072 1.17559 2.22464 1 2.66667 1H11C11.442 1 11.866 1.17559 12.1785 1.48816C12.4911 1.80072 12.6667 2.22464 12.6667 2.66667V16Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.btn.btn-icon.icon-phone::before{
    content: url('data:image/svg+xml,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.8881 15.9201V18.9201C20.8892 19.1986 20.8322 19.4743 20.7206 19.7294C20.6091 19.9846 20.4454 20.2137 20.2402 20.402C20.035 20.5902 19.7927 20.7336 19.5289 20.8228C19.265 20.912 18.9855 20.9452 18.7081 20.9201C15.631 20.5857 12.6751 19.5342 10.0781 17.8501C7.66194 16.3148 5.61345 14.2663 4.07812 11.8501C2.38809 9.2413 1.33636 6.27109 1.00812 3.1801C0.983127 2.90356 1.01599 2.62486 1.10462 2.36172C1.19324 2.09859 1.33569 1.85679 1.52288 1.65172C1.71008 1.44665 1.93792 1.28281 2.19191 1.17062C2.44589 1.05843 2.72046 1.00036 2.99812 1.0001H5.99812C6.48342 0.995321 6.95391 1.16718 7.32188 1.48363C7.68985 1.80008 7.93019 2.23954 7.99812 2.7201C8.12474 3.68016 8.35957 4.62282 8.69812 5.5301C8.83266 5.88802 8.86178 6.27701 8.78202 6.65098C8.70227 7.02494 8.51698 7.36821 8.24812 7.6401L6.97812 8.9101C8.40167 11.4136 10.4746 13.4865 12.9781 14.9101L14.2481 13.6401C14.52 13.3712 14.8633 13.1859 15.2372 13.1062C15.6112 13.0264 16.0002 13.0556 16.3581 13.1901C17.2654 13.5286 18.2081 13.7635 19.1681 13.8901C19.6539 13.9586 20.0975 14.2033 20.4146 14.5776C20.7318 14.9519 20.9003 15.4297 20.8881 15.9201Z" stroke="%231593CA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}