/* 
 * Utility: adds phone icon before button text  
 * Use: 
 *  - add "btn--phone" class to any button to insert the icon
 */
.btn--phone a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn--phone a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-image: url('../../images/phone.svg');
    mask-image: url('../../images/phone.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* base button style */
.btn {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.5px;
    padding: 16px 24px;
    border-radius: 999px;
    text-align: center;
    text-decoration: none;
}

/* included base button styles as default fallback in case user omits button style class */
.btn,
.btn__primary {
    color: var(--wp--preset--color--primary-white);
    background-color: var(--wp--preset--color--green-600);
    border: 2px solid var(--wp--preset--color--green-600);
}

.btn:hover,
.btn__primary:hover {
    background-color: var(--wp--preset--color--green-700);
    border-color: var(--wp--preset--color--green-700);
}

/* secondary btn styles */
.btn__secondary {
    color: var(--wp--preset--color--primary-white);
    background-color: var(--wp--preset--color--blue-600);
    border-color: var(--wp--preset--color--blue-600);
}

.btn__secondary:hover {
    background-color: var(--wp--preset--color--blue-800);
    border-color: var(--wp--preset--color--blue-800);
}

/* tertiary green btn styles */
.btn__tertiary-green {
    color: var(--wp--preset--color--green-700);
    background-color: var(--wp--preset--color--primary-white);
    border-color: var(--wp--preset--color--green-700);
}

.btn__tertiary-green:hover {
    background-color: var(--wp--preset--color--green-100);
    border-color: var(--wp--preset--color--green-700);
}

/* tertiary blue btn styles */
.btn__tertiary-blue {
    color: var(--wp--preset--color--blue-800);
    background-color: var(--wp--preset--color--primary-white);
    border-color: var(--wp--preset--color--blue-800);
}

.btn__tertiary-blue:hover {
    background-color: var(--wp--preset--color--blue-100);
    border-color: var(--wp--preset--color--blue-800);
}

/* disabled btn styles */
.btn__disabled {
    color: var(--wp--preset--color--gray-900);
    background-color: var(--wp--preset--color--gray-300);
    border-color: var(--wp--preset--color--gray-300);
}

.btn__disabled:hover {
    background-color: var(--wp--preset--color--gray-300);
    border-color: var(--wp--preset--color--gray-300);
}