.btn {
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-y: .625rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 500;
    --bs-border-width: 2px;
    --bs-btn-border-radius: 50px;
}

.btn-primary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
}

.btn-secondary {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-focus-shadow-rgb: var(--color-secondary-rgb);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary-hover);
}

.btn-white {
    --bs-btn-color: var(--color-black);
    --bs-btn-bg: var(--color-white);
    --bs-btn-border-color: var(--color-white);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: var(--color-white-hover);
    --bs-btn-hover-border-color: var(--color-white-hover);
    --bs-btn-focus-shadow-rgb: var(--color-white-rgb);
    --bs-btn-active-color: var(--color-black);
    --bs-btn-active-bg: var(--color-white-hover);
    --bs-btn-active-border-color: var(--color-white-hover);

}

.btn-black {
    --bs-btn-color: var(--color-white);
    --bs-btn-bg: var(--color-black);
    --bs-btn-border-color: var(--color-black);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-black-hover);
    --bs-btn-hover-border-color: var(--color-black-hover);
    --bs-btn-focus-shadow-rgb: var(--color-black-rgb);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-black-hover);
    --bs-btn-active-border-color: var(--color-black-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-primary);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-secondary);
    --bs-btn-hover-border-color: var(--color-secondary);
    --bs-btn-focus-shadow-rgb: var(--color-secondary-rgb);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-secondary);
    --bs-btn-active-border-color: var(--color-secondary);
}

.btn-outline-white {
    --bs-btn-color: var(--color-white);
    --bs-btn-border-color: var(--color-white);
    --bs-btn-hover-color: var(--color-black);
    --bs-btn-hover-bg: var(--color-white);
    --bs-btn-hover-border-color: var(--color-white);
    --bs-btn-focus-shadow-rgb: var(--color-white-rgb);
    --bs-btn-active-color: var(--color-black);
    --bs-btn-active-bg: var(--color-white);
    --bs-btn-active-border-color: var(--color-white);
}

.btn-outline-black {
    --bs-btn-color: var(--color-black);
    --bs-btn-border-color: var(--color-black);
    --bs-btn-hover-color: var(--color-white);
    --bs-btn-hover-bg: var(--color-black);
    --bs-btn-hover-border-color: var(--color-black);
    --bs-btn-focus-shadow-rgb: var(--color-black-rgb);
    --bs-btn-active-color: var(--color-white);
    --bs-btn-active-bg: var(--color-black);
    --bs-btn-active-border-color: var(--color-black);
}

.btn-link {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: .25rem;
    --bs-btn-border-radius: .25rem;
    --bs-btn-focus-shadow-rgb: var(--color-primary-rgb);
    position: relative;
    text-decoration: none;
    border: 0;
}

.btn-link::after {
    content: "";
    position: absolute;
    width: 100%;
    height: .125rem;
    inset-block-end: 0;
    inset-inline-start: 0;
    background: var(--color-primary);
    transform: scaleX(1);
    transform-origin: 0 50%;
    transition: transform 250ms cubic-bezier(.24, .28, .63, 1);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
}