// Import external dependencies
@import (reference) '@cfpb/cfpb-grid/src/cfpb-grid.less';
@import (reference) '@cfpb/cfpb-core/src/cfpb-core.less';
@import (reference) '@cfpb/cfpb-buttons/src/cfpb-buttons.less';
@import (reference) '@cfpb/cfpb-icons/src/cfpb-icons.less';

/* ==========================================================================
   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 (less) 'atoms/form-alert.less';
@import (less) 'atoms/label.less';
@import (less) 'atoms/legend.less';
@import (less) 'atoms/range.less';
@import (less) 'atoms/select.less';
@import (less) 'atoms/text-input.less';

//
// Import molecules
//

@import (less) 'molecules/form-fields.less';

//
// Import organisms
//

@import (less) 'organisms/form.less';
@import (less) 'organisms/multiselect.less';
@import (less) 'organisms/search-input.less';