/*----base buttons----*/
.btn {
    border-radius: .375rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.btn:hover,
.btn:focus {
    text-decoration: none;
    transform: translateY(-2px);
}

.btn:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(192,0,0,.2);
    outline: 0;
}

.btn:active {
    transform: translateY(0);
}

/*----button sizes----*/
.btn-sm {
    font-size: .875rem;
    min-height: auto;
    padding: .375rem .75rem;
}

.btn-lg {
    font-size: 1.125rem;
    padding: 1rem 2rem;
}

/*----solid buttons----*/
.btn-st-red {
    background: var(--st-red);
    border-color: var(--st-red);
    color: var(--st-white);
}

.btn-st-red:hover,
.btn-st-red:focus {
    background: var(--st-red-dark);
    border-color: var(--st-red-dark);
    color: var(--st-white);
}

.btn-st-black {
    background: var(--st-black);
    border-color: var(--st-black);
    color: var(--st-white);
}

.btn-st-black:hover,
.btn-st-black:focus {
    background: var(--st-charcoal);
    border-color: var(--st-charcoal);
    color: var(--st-white);
}

.btn-st-white {
    background: var(--st-white);
    border-color: var(--st-white);
    color: var(--st-black);
}

.btn-st-white:hover,
.btn-st-white:focus {
    background: var(--st-gray-100);
    border-color: var(--st-gray-100);
    color: var(--st-black);
}

.btn-st-gray {
    background: var(--st-gray-100);
    border-color: var(--st-gray-300);
    color: var(--st-charcoal);
}

.btn-st-gray:hover,
.btn-st-gray:focus {
    background: var(--st-gray-200);
    border-color: var(--st-gray-400);
    color: var(--st-black);
}

.btn-st-dark-gray {
    background: var(--st-gray-700);
    border-color: var(--st-gray-700);
    color: var(--st-white);
}

.btn-st-dark-gray:hover,
.btn-st-dark-gray:focus {
    background: var(--st-gray-800);
    border-color: var(--st-gray-800);
    color: var(--st-white);
}

/*----outline buttons----*/
.btn-st-outline-red {
    background: transparent;
    border-color: var(--st-red);
    color: var(--st-red);
}

.btn-st-outline-red:hover,
.btn-st-outline-red:focus {
    background: var(--st-red);
    color: var(--st-white);
}

.btn-st-outline-black {
    background: transparent;
    border-color: var(--st-black);
    color: var(--st-black);
}

.btn-st-outline-black:hover,
.btn-st-outline-black:focus {
    background: var(--st-black);
    color: var(--st-white);
}

.btn-st-outline-white {
    background: transparent;
    border-color: var(--st-white);
    color: var(--st-white);
}

.btn-st-outline-white:hover,
.btn-st-outline-white:focus {
    background: var(--st-white);
    color: var(--st-black);
}

.btn-st-outline-gray {
    background: transparent;
    border-color: var(--st-gray-400);
    color: var(--st-charcoal);
}

.btn-st-outline-gray:hover,
.btn-st-outline-gray:focus {
    background: var(--st-gray-200);
    border-color: var(--st-gray-300);
    color: var(--st-black);
}

.btn-st-outline-dark-gray {
    background: transparent;
    border-color: var(--st-gray-700);
    color: var(--st-gray-700);
}

.btn-st-outline-dark-gray:hover,
.btn-st-outline-dark-gray:focus {
    background: var(--st-gray-700);
    border-color: var(--st-gray-700);
    color: var(--st-white);
}

/*----text button----*/
.btn-st-text {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--st-charcoal);
    display: inline-flex;
    font-weight: 700;
    gap: .65rem;
    min-height: auto;
    padding: 0;
}

.btn-st-text:hover,
.btn-st-text:focus {
    color: var(--st-red);
}

.btn-st-text::after {
    content: '\2192';
    font-size: 1.25rem;
    transition: transform var(--transition-fast);
}

.btn-st-text:hover::after,
.btn-st-text:focus::after {
    transform: translateX(.3rem);
}

/*----disabled----*/
.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    opacity: .55;
    pointer-events: none;
}