/////////////////////////////////////////
// THEME / VARIABLES / SEARCH-AND-SELECTS
/////////////////////////////////////////


@import '_variables.color-palette';
@import '_variables.modular-scale';
@import '_variables.sizing';


// Background color
$bg-color-search-and-select-search-area: $bg-color-input;                                 // Search area background-color
$bg-color-search-and-select-available-items: $bg-color-input;                             // Available items background-color
$bg-color-search-and-select-selected-item-label: var(--bg-lightest-gray);                 // Selected item label background-color
$bg-color-search-and-select-selected-item-label-hover: var(--bg-lighter-gray);            // Selected item label hover background-color
$bg-color-search-and-select-visual-hover: var(--bg-brand-eta);                            // Visual hover background-color
$bg-color-search-and-select-disabled: $bg-color-input-disabled;                           // Disabled background-color


// Border color
$border-color-search-and-select-area: $border-color-input;                                // Search area border-color
$border-color-search-and-select-hover: $border-color-input-hover;                         // Search-and-select items :hover border-color
$border-color-search-and-select-visual-focus: $border-color-input-focus;                  // Search-and-select items visual focus border-color
$border-color-search-and-select-available-items: var(--b-lighter-gray);                   // Available items border-color
$border-color-search-and-select-available-items-group: var(--b-lighter-gray);             // Available items group border-color
$border-color-search-and-select-available-items-li: var(--b-lighter-gray);                // Available items list item border-color
$border-color-search-and-select-selected-item-label: var(--b-input);                      // Selected item label border-color


// Border style
$border-style-search-and-select-area: solid;                                              // Search area border-style
$border-style-search-and-select-available-items: solid;                                   // Available items border-style
$border-style-search-and-select-available-items-group: solid;                             // Available items group border-style
$border-style-search-and-select-available-items-li: solid;                                // Available items list item border-style
$border-style-search-and-select-selected-item-label: solid;                               // Selected item label border-style


// Border width
$border-width-search-and-select-area: 1px;                                                // Search area border-width
$border-width-search-and-select-available-items: 1px;                                     // Available items border-width
$border-width-search-and-select-available-items-group: 2px;                               // Available items group border-width
$border-width-search-and-select-available-items-li: 1px;                                  // Available items list item border-width
$border-width-search-and-select-selected-item-label: $border-width-button;                // Selected item label border-width


// Color
$color-search-and-select-visual-hover: $cream;                                            // Visual hover color


// Flex basis
$flex-basis-search-and-select-search-area-multiple-input: 25%;                            // Search area multiple input flex basis


// Font size
$font-size-search-and-select-selected-item-label: #{ms(-1)}em;                            // Selected item label font-size: .84em


// Font weight
$font-weight-search-and-select-available-item-group-heading-bold: true;                   // Bold available item group heading? True/false


// Gap
$column-gap-search-and-select-selected-items: $length-em-3;                               // Column-gap search-and-select selected items: .75em
$row-gap-search-and-select-selected-items: $length-em-3;                                  // Row-gap search-and-select selected items: .75em


// Height & width
$height-search-and-select-available-items: clamp(#{ms(14)}em, 32vh, #{ms(19)}em);         // Height search-and-select available items: min - 7.49em, ideal - 32vh, max - 19.98em
$max-height-search-and-select-search-area: $length-em-12;                                 // Max-height search-and-select search area: 9.99em
$min-width-search-and-select-input: 12ch;                                                 // Min-width search-and-select input


// Opacity
$opacity-search-and-select-disabled: .75;                                                 // Disabled search-and-select opacity


// Padding
$padding-bottom-search-and-select-selected-items: $padding-bottom-input;                  // Padding-bottom of selected items: .56em
$padding-left-search-and-select-selected-items: $padding-left-input;                      // Padding-left of selected items: .75em
$padding-right-search-and-select-selected-items: $length-em-4;                            // Padding-right of selected items: 1em
$padding-top-search-and-select-selected-items: $padding-top-input;                        // Padding-top of selected items: .56em

$padding-bottom-search-and-select-available-items-li: $length-em-2;                       // Padding-bottom of available items list item: .56em
$padding-left-search-and-select-available-items-li: $length-em-4;                         // Padding-left of available items list item: 1em
$padding-right-search-and-select-available-items-li: $length-em-7;                        // Padding-right of available items list item: 2.67em
$padding-top-search-and-select-available-items-li: $length-em-2;                          // Padding-top of available items list item: .56em

$padding-left-search-and-select-available-items-li-presentation-sibling: $length-em-6;    // Padding-left of available items list item (sibling of presentation item): 1.78em

$padding-bottom-search-and-select-selected-item-label: #{ms(-6)}rem;                      // Padding-bottom of selected item label: .32rem
$padding-left-search-and-select-selected-item-label: #{ms(-2)}rem;                        // Padding-left of selected item label: .75rem
$padding-right-search-and-select-selected-item-label: #{ms(-2)}rem;                       // Padding-right of selected item label: .75rem
$padding-top-search-and-select-selected-item-label: #{ms(-6)}rem;                         // Padding-top of selected item label: .32rem