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


@import '_variables.body';
@import '_variables.color-palette';
@import '_variables.forms';
@import '_variables.sizing';


// Background color
$bg-color-select-1-light-mode: $bg-color-input-light-mode;  // <select> top linear-gradient background-color in light mode
$bg-color-select-1-dark-mode: $bg-color-input-dark-mode;    // <select> top linear-gradient background-color in dark mode
$bg-color-select-1: var(--bg-select-1);

$bg-color-select-2-light-mode: $bg-color-input-light-mode;  // <select> bottom linear-gradient background-color in light mode
$bg-color-select-2-dark-mode: $bg-color-input-dark-mode;    // <select> bottom linear-gradient background-color in dark mode
$bg-color-select-2: var(--bg-select-2);


// 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: var(--body);

$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