/* Reusable project-wide button palette. All colors come from theme.css. */
.btn-platform,
.btn-theme-primary {
    --bs-btn-color: var(--thm-white);
    --bs-btn-bg: var(--thm-purple);
    --bs-btn-border-color: var(--thm-purple);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-blue);
    --bs-btn-hover-border-color: var(--thm-blue);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-dark);
    --bs-btn-active-border-color: var(--thm-dark);
}

.btn-theme-blue {
    --bs-btn-color: var(--thm-white);
    --bs-btn-bg: var(--thm-blue);
    --bs-btn-border-color: var(--thm-blue);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-purple);
    --bs-btn-hover-border-color: var(--thm-purple);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-dark);
    --bs-btn-active-border-color: var(--thm-dark);
}

.btn-coral,
.btn-theme-coral {
    --bs-btn-color: var(--thm-white);
    --bs-btn-bg: var(--thm-coral);
    --bs-btn-border-color: var(--thm-coral);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-purple);
    --bs-btn-hover-border-color: var(--thm-purple);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-dark);
    --bs-btn-active-border-color: var(--thm-dark);
}

.btn-theme-pink {
    --bs-btn-color: var(--thm-dark);
    --bs-btn-bg: var(--thm-pink);
    --bs-btn-border-color: var(--thm-pink);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-purple);
    --bs-btn-hover-border-color: var(--thm-purple);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-dark);
    --bs-btn-active-border-color: var(--thm-dark);
}

.btn-theme-dark {
    --bs-btn-color: var(--thm-white);
    --bs-btn-bg: var(--thm-dark);
    --bs-btn-border-color: var(--thm-dark);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-gray-700);
    --bs-btn-hover-border-color: var(--thm-gray-700);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-purple);
    --bs-btn-active-border-color: var(--thm-purple);
}

.btn-theme-gray {
    --bs-btn-color: var(--thm-white);
    --bs-btn-bg: var(--thm-gray-700);
    --bs-btn-border-color: var(--thm-gray-700);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-dark);
    --bs-btn-hover-border-color: var(--thm-dark);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-purple);
    --bs-btn-active-border-color: var(--thm-purple);
}

.btn-theme-light {
    --bs-btn-color: var(--thm-dark);
    --bs-btn-bg: var(--thm-gray-100);
    --bs-btn-border-color: var(--thm-gray-300);
    --bs-btn-hover-color: var(--thm-dark);
    --bs-btn-hover-bg: var(--thm-gray-200);
    --bs-btn-hover-border-color: var(--thm-gray-300);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-gray-700);
    --bs-btn-active-border-color: var(--thm-gray-700);
}

.btn-theme-white {
    --bs-btn-color: var(--thm-dark);
    --bs-btn-bg: var(--thm-white);
    --bs-btn-border-color: var(--thm-gray-300);
    --bs-btn-hover-color: var(--thm-dark);
    --bs-btn-hover-bg: var(--thm-gray-50);
    --bs-btn-hover-border-color: var(--thm-gray-500);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-gray-700);
    --bs-btn-active-border-color: var(--thm-gray-700);
}

.btn-outline-platform,
.btn-outline-theme-primary {
    --bs-btn-color: var(--thm-purple);
    --bs-btn-border-color: var(--thm-purple);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-purple);
    --bs-btn-hover-border-color: var(--thm-purple);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-blue);
    --bs-btn-active-border-color: var(--thm-blue);
}

.btn-outline-theme-blue {
    --bs-btn-color: var(--thm-blue);
    --bs-btn-border-color: var(--thm-blue);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-blue);
    --bs-btn-hover-border-color: var(--thm-blue);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-purple);
    --bs-btn-active-border-color: var(--thm-purple);
}

.btn-outline-theme-coral {
    --bs-btn-color: var(--thm-coral);
    --bs-btn-border-color: var(--thm-coral);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-coral);
    --bs-btn-hover-border-color: var(--thm-coral);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-purple);
    --bs-btn-active-border-color: var(--thm-purple);
}

.btn-outline-theme-pink {
    --bs-btn-color: var(--thm-purple);
    --bs-btn-border-color: var(--thm-pink);
    --bs-btn-hover-color: var(--thm-dark);
    --bs-btn-hover-bg: var(--thm-pink);
    --bs-btn-hover-border-color: var(--thm-pink);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-purple);
    --bs-btn-active-border-color: var(--thm-purple);
}

.btn-outline-theme-gray {
    --bs-btn-color: var(--thm-gray-700);
    --bs-btn-border-color: var(--thm-gray-500);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-gray-700);
    --bs-btn-hover-border-color: var(--thm-gray-700);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-dark);
    --bs-btn-active-border-color: var(--thm-dark);
}

.btn-outline-theme-dark {
    --bs-btn-color: var(--thm-dark);
    --bs-btn-border-color: var(--thm-dark);
    --bs-btn-hover-color: var(--thm-white);
    --bs-btn-hover-bg: var(--thm-dark);
    --bs-btn-hover-border-color: var(--thm-dark);
    --bs-btn-active-color: var(--thm-white);
    --bs-btn-active-bg: var(--thm-gray-700);
    --bs-btn-active-border-color: var(--thm-gray-700);
}