@use '@cfpb/cfpb-design-system/src/abstracts' as *;

/* ==========================================================================
   Design System
   Button Styling
   ========================================================================== */

//
// Theme variables
//

// Color variables

// .btn
$btn-text: var(--white);
$btn-bg: var(--pacific);
$btn-bg-hover: var(--pacific-dark);
$btn-bg-active: var(--navy);
$btn-divider: var(--pacific-60);

// .btn__secondary
$btn-secondary-text: var(--pacific);
$btn-secondary-text-hover: var(--pacific-dark);
$btn-secondary-text-active: var(--navy);
$btn-secondary-bg: var(--white);
$btn-secondary-bg-hover: var(--pacific-10);
$btn-secondary-bg-active: var(--pacific-20);
$btn-secondary-border: var(--pacific);
$btn-secondary-border-hover: var(--pacific-dark);
$btn-secondary-border-active: var(--navy);
$btn-secondary-divider: var(--pacific-60);

// .btn__warning
$btn-warning-text: var(--white);
$btn-warning-bg: var(--red-mid-dark);
$btn-warning-bg-hover: var(--red-dark);
$btn-warning-bg-active: var(--gray-dark);
$btn-warning-divider: var(--red-60);

// .btn__disabled
$btn-disabled-text: var(--gray-dark);
$btn-disabled-bg: var(--gray-20);
$btn-disabled-outline: var(--gray-20);
$btn-disabled-divider: var(--gray-60);