// dropdown select variables
// SCSS variables for internal component use and customization
// these variables can be customized by the user

// sizing
$dropdown-width: 300px !default;
$options-max-height: 15rem !default;
$caret-size: 0.25rem !default;

// fonts
$font-family:
	-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
	Cantarell, "Open Sans", "Helvetica Neue", sans-serif !default;
$font-size-base: 1rem !default;
$line-height: 1.5 !default;

// colors
$color-text: #333 !default;
$color-background: #fff !default;
$color-border: #ddd !default;
$color-border-hover: #aaa !default;
$color-border-dark: #666 !default;
$color-primary: #4299e1 !default;
$color-hover: #f0f0f0 !default;
$color-focus: #e6f7ff !default;
$color-selected: #e6f7ff !default;

// RGB values for use in rgba() functions
$color-primary-rgb: 66, 153, 225 !default;

// spacing
$spacing-xs: 0.25rem !default;
$spacing-sm: 0.75rem !default;
$spacing-md: 1rem !default;

// misc
$border-radius: 0.25rem !default;
$box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !default;
$z-index-dropdown: 10 !default;
$transition-duration: 0.2s !default;
$transition-default:
	border-color $transition-duration,
	box-shadow $transition-duration !default;

// Define CSS Custom Properties (variables) using the SCSS values as defaults
:root {
  // sizing
  --select-dropdown-width: #{$dropdown-width};
  --select-options-max-height: #{$options-max-height};
  --select-caret-size: #{$caret-size};
  
  // fonts
  --select-font-family: #{$font-family};
  --select-font-size-base: #{$font-size-base};
  --select-line-height: #{$line-height};
  
  // colors
  --select-color-text: #{$color-text};
  --select-color-background: #{$color-background};
  --select-color-border: #{$color-border};
  --select-color-border-hover: #{$color-border-hover};
  --select-color-border-dark: #{$color-border-dark};
  --select-color-primary: #{$color-primary};
  --select-color-primary-rgb: #{$color-primary-rgb};
  --select-color-hover: #{$color-hover};
  --select-color-focus: #{$color-focus};
  --select-color-selected: #{$color-selected};
  
  // spacing
  --select-spacing-xs: #{$spacing-xs};
  --select-spacing-sm: #{$spacing-sm};
  --select-spacing-md: #{$spacing-md};
  
  // misc
  --select-border-radius: #{$border-radius};
  --select-box-shadow: #{$box-shadow};
  --select-z-index-dropdown: #{$z-index-dropdown};
  --select-transition-duration: #{$transition-duration};
}