//////////////////////////////////////
// THEME / VARIABLES / FORMS - SELECTS
//////////////////////////////////////


@import '_variables.body';
@import '_variables.colors';
@import '_variables.sizing';


// Background color
$bg-color-select-1-light-mode: $white;                    // <select> top linear-gradient background-color in light mode
$bg-color-select-1-dark-mode: $black;	                    // <select> top linear-gradient background-color in dark mode
$bg-color-select-2-light-mode: $lightest-gray;            // <select> bottom linear-gradient background-color in light mode
$bg-color-select-2-dark-mode: $darkest-gray;              // <select> bottom linear-gradient background-color in dark mode


// Background position
$bg-position-arrow: $length-em-4;                         // Position of arrow from right edge of <select>


// Background size
$bg-size-arrow-select: $length-em-2;                      // Size of <select> arrow


// Color
$color-select-light-mode: $color-body-light-mode;         // <select> color in light mode
$color-select-dark-mode: $color-body-dark-mode;	          // <select> color in dark mode
$color-select-arrow-light-mode: $color-body-light-mode;   // <select> arrow color in light mode
$color-select-arrow-dark-mode: $color-body-dark-mode;	    // <select> arrow color in dark mode


// Padding
$padding-right-select: $length-em-7;                      // <select> padding-right is larger to allow for arrow