// Import external dependencies
@import '@cfpb/cfpb-grid/src/cfpb-grid';
@import '@cfpb/cfpb-core/src/cfpb-core';
@import '@cfpb/cfpb-buttons/src/cfpb-buttons';
@import '@cfpb/cfpb-icons/src/cfpb-icons';

/* ==========================================================================
   Design System
   Form Element Styling
   ========================================================================== */
//
// Theme variables
//

// Color variables

// .a-text-input borders
$input-border: var(--gray-60);
$input-border-hover: var(--pacific);
$input-border-focused: var(--pacific);
$input-border-error: var(--red);
$input-border-error-hover: var(--red-dark);
$input-border-warning: var(--gold);
$input-border-warning-hover: var(--gold-dark);
$input-border-success: var(--green);
$input-border-success-hover: var(--green-dark);

// .a-text-input backgrounds
$input-bg: var(--white);
$input-bg-selected: var(--pacific);
$input-bg-disabled: var(--gray-10);
$input-bg-disabled-selected: var(--gray-40);

// .a-text-input text
$input-text: var(--black);
$input-text-disabled: var(--gray-dark);
$input-text-placeholder: var(--gray-dark);

// .a-text-input icons
$input-icon: var(--gray);
$input-icon-success: var(--green);
$input-icon-warning: var(--gold);
$input-icon-error: var(--red);

// .a-select
$select-border: $input-border;
$select-icon-bg: var(--gray-10);
$select-text-disabled: $input-text-disabled;

// .m-form-field
$form-field-input-border: $input-border;
$form-field-input-border-disabled: var(--gray-60);
$form-field-inset: var(--white);

// .m-form-field--lg-target
$form-field-input-lg-target-bg: var(--gray-10);
$form-field-input-lg-target-bg-selected: var(--pacific-20);
$form-field-input-lg-target-bg-disabled: var(--gray-20);
$form-field-input-lg-target-border: var(--pacific);

// .a-label__helper
$label-helper: var(--gray-dark);

// .a-range borders
$range-border: var(--gray-40);
$range-border-focused: var(--pacific);

// .a-range backgrounds
$range-bg: var(--gray-10);
$range-bg-track: var(--gray-80);
$range-bg-focused: var(--pacific-20);

// Sizing variables

// .a-select
$select-height: 35px;

//
// Import atoms
//

@import 'atoms/form-alert';
@import 'atoms/label';
@import 'atoms/legend';
@import 'atoms/range';
@import 'atoms/select';
@import 'atoms/text-input';

//
// Import molecules
//

@import 'molecules/form-fields';

//
// Import organisms
//

@import 'organisms/form';
@import 'organisms/multiselect';
@import 'organisms/search-input';