$_bgBaseColor = #858585;
$_bgSelectBaseColor = #E1E1E1;
$_bgHighlightColor = #A0A0A0;

$highlight = #0095DD;
$darkBG = #00202F;
$barFG = #fff;

$barHeight = 45px;
$tapTargetSize = 32px;

$COMPONENT_CUSTOM_FONT_NAME = "Fira Sans";
$fontFamilyPrimary = $COMPONENT_CUSTOM_FONT_NAME, "Fira Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
$COMPONENT_UI_LINE_HEIGHT = 19px;
$COMPONENT_UI_FONT_SIZE = 14px;
$COMPONENT_UI_HEADER_FONT_SIZE = 20px;
$COMPONENT_UI_LINE_PADDING = ($COMPONENT_UI_LINE_HEIGHT - $COMPONENT_UI_FONT_SIZE) / 2; // for when you don't want to specify line-height
$COMPONENT_UI_TEXT_COLOR = #D4D4D4;
$COMPONENT_UI_TEXT_COLOR_SELECTED = #F2F2F2;
$COMPONENT_UI_TEXT_COLOR_HOVER = mix($COMPONENT_UI_TEXT_COLOR, $COMPONENT_UI_TEXT_COLOR_SELECTED, 25%);

// responsive breakpoints
$xs = {                end:  768px, name: xs }
$s  = { start:  768px, end:  992px, name: s  }
$m  = { start:  992px, end: 1200px, name: m  }
$l  = { start: 1200px,              name: l  }