// Syntax: <property>-<value>[--componentName]
// Ex: @color-grayLight--highlightMenu: rgb(51, 51, 50);
// Colors // --------------------------------------------------
$color-amount--light: 11%;
$color-amount--lighter: 22%;
$color-amount--lightest: 33%;
$color-amount--dark: 11%;
$color-amount--darker: 22%;
$color-amount--darkest: 33%;

$color-primary: #FF1744 !default;

$color-grey: #9C9C9C !default;
$color-grey--light: lighten($color-grey, $color-amount--light);
$color-grey--lighter: lighten($color-grey, $color-amount--lighter);
$color-grey--dark: darken($color-grey, $color-amount--dark);
$color-grey--darker: darken($color-grey, $color-amount--darker);

$color-text-default: #222222 !default;
$color-bg-default: #FFFFFF !default;

// Storyline specific
$color-circle: rgba( $color-grey, .7);
$color-circle-active: rgba( $color-primary, .7);
$size-nav-dot: 10px;
$size-nav-dot--active: 16px;