.btn.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-color, #0d6efd);
    --bs-btn-border-color: var(--brand-color, #0d6efd);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-hover-color, #0d6efd);
    --bs-btn-hover-border-color: var(--brand-hover-color, #0d6efd);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-active-color, #0d6efd);
    --bs-btn-active-border-color: var(--brand-active-color, #0d6efd);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-disabled-color, #0d6efd);
    --bs-btn-disabled-border-color: var(--brand-disabled-color, #0d6efd);

    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
}

.btn.btn-brand:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
}

.btn.btn-brand:focus,
.btn.btn-brand:focus-visible {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--brand-color, #0d6efd) 25%, transparent);
}

.btn.btn-brand:active,
.btn.btn-brand.active,
.btn.btn-brand:active:hover,
.btn.btn-brand.active:hover {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn.btn-brand:disabled,
.btn.btn-brand.disabled {
    color: var(--bs-btn-disabled-color);
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    opacity: 0.65;
}