@use "sass:meta";
@use "sass:math";
@use "sass:color";

/// Remove the unit of a length
/// @param {Number} $number - Number to remove unit from
/// @author Hugo Giraudel
/// @return {Number} - Unitless number
@function strip-unit($number) {
  @if meta.type-of($number) == 'number' and not math.is-unitless($number) {
    @return math.div($number, $number * 0 + 1);
  }

  @return $number;
}

/*******************************
         Site Settings
*******************************/

/*-------------------
       Fonts
--------------------*/

$fontName          : 'Lato' !default;
$fontSmoothing     : antialiased !default;

$headerFont        : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;
$pageFont          : $fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif !default;

$googleFontName    : $fontName !default;
$importGoogleFonts : true !default;
$googleFontSizes   : '400,700,400italic,700italic' !default;
$googleSubset      : 'latin' !default;

$googleProtocol    : 'https://' !default;
$googleFontRequest : '${googleFontName}:${googleFontSizes}&subset=${googleSubset}' !default;

/*-------------------
      Base Sizes
--------------------*/

/* This is the single variable that controls them all */
$emSize   : 14px !default;

/* The size of page text  */
$fontSize : 14px !default;

/*-------------------
  Exact Pixel Values
--------------------*/
/*
  These are used to specify exact pixel values in em
  for things like borders that remain constantly
  sized as emSize adjusts

  Since there are many more sizes than names for sizes,
  these are named by their original pixel values.

*/


$a1px  : calc(1 / strip-unit($emSize)) + rem !default;
$a4px  : calc(4 / strip-unit($emSize)) + rem !default;
$a11px  : calc(11 / strip-unit($emSize)) + rem !default;
$a14px  : calc(14 / strip-unit($emSize)) + rem !default;

$relative1px  : calc(1 / strip-unit($emSize)) + em !default;
$relative4px  : calc(4 / strip-unit($emSize)) + em !default;
$relative11px  : calc(11 / strip-unit($emSize)) + em !default;
$relative14px  : calc(14 / strip-unit($emSize)) + em !default;



/*-------------------
    Border Radius
--------------------*/

/* See Power-user section below
   for explanation of $px variables
*/
$relativeBorderRadius: $relative4px !default;
$absoluteBorderRadius: $a4px !default;

$defaultBorderRadius: $absoluteBorderRadius !default;



/*-------------------
      Site Colors
--------------------*/

/*---  Colors  ---*/
$red              : #DB2828 !default;
$orange           : #F2711C !default;
$yellow           : #FBBD08 !default;
$olive            : #B5CC18 !default;
$green            : #21BA45 !default;
$teal             : #00B5AD !default;
$blue             : #2185D0 !default;
$violet           : #6435C9 !default;
$purple           : #A333C8 !default;
$pink             : #E03997 !default;
$brown            : #A5673F !default;
$grey             : #767676 !default;
$black            : #1B1C1D !default;

/*---  Light Colors  ---*/
$lightRed         : #FF695E !default;
$lightOrange      : #FF851B !default;
$lightYellow      : #FFE21F !default;
$lightOlive       : #D9E778 !default;
$lightGreen       : #2ECC40 !default;
$lightTeal        : #6DFFFF !default;
$lightBlue        : #54C8FF !default;
$lightViolet      : #A291FB !default;
$lightPurple      : #DC73FF !default;
$lightPink        : #FF8EDF !default;
$lightBrown       : #D67C1C !default;
$lightGrey        : #DCDDDE !default;
$lightBlack       : #545454 !default;

/*---   Neutrals  ---*/
$fullBlack        : #000000 !default;
$offWhite         : #F9FAFB !default;
$darkWhite        : #F3F4F5 !default;
$midWhite         : #DCDDDE !default;
$white            : #FFFFFF !default;

/*--- Colored Backgrounds ---*/
$redBackground    : #FFE8E6 !default;
$orangeBackground : #FFEDDE !default;
$yellowBackground : #FFF8DB !default;
$oliveBackground  : #FBFDEF !default;
$greenBackground  : #E5F9E7 !default;
$tealBackground   : #E1F7F7 !default;
$blueBackground   : #DFF0FF !default;
$violetBackground : #EAE7FF !default;
$purpleBackground : #F6E7FF !default;
$pinkBackground   : #FFE3FB !default;
$brownBackground  : #F1E2D3 !default;

/*--- Colored Text ---*/
$redTextColor    : $red !default;
$orangeTextColor : $orange !default;
$yellowTextColor : #B58105 !default; // Yellow text is difficult to read
$oliveTextColor  : #8ABC1E !default; // Olive is difficult to read
$greenTextColor  : #1EBC30 !default; // Green is difficult to read
$tealTextColor   : #10A3A3 !default; // Teal text is difficult to read
$blueTextColor   : $blue !default;
$violetTextColor : $violet !default;
$purpleTextColor : $purple !default;
$pinkTextColor   : $pink !default;
$brownTextColor  : $brown !default;

/*--- Colored Headers ---*/
$redHeaderColor    : color.adjust($redTextColor, $lightness: -5%) !default;
$oliveHeaderColor  : color.adjust($oliveTextColor, $lightness: -5%) !default;
$greenHeaderColor  : color.adjust($greenTextColor, $lightness: -5%) !default;
$yellowHeaderColor : color.adjust($yellowTextColor, $lightness: -5%) !default;
$blueHeaderColor   : color.adjust($blueTextColor, $lightness: -5%) !default;
$tealHeaderColor   : color.adjust($tealTextColor, $lightness: -5%) !default;
$pinkHeaderColor   : color.adjust($pinkTextColor, $lightness: -5%) !default;
$violetHeaderColor : color.adjust($violetTextColor, $lightness: -5%) !default;
$purpleHeaderColor : color.adjust($purpleTextColor, $lightness: -5%) !default;
$orangeHeaderColor : color.adjust($orangeTextColor, $lightness: -5%) !default;
$brownHeaderColor  : color.adjust($brownTextColor, $lightness: -5%) !default;

/*--- Colored Border ---*/
$redBorderColor    : $redTextColor !default;
$orangeBorderColor : $orangeTextColor !default;
$yellowBorderColor : $yellowTextColor !default;
$oliveBorderColor  : $oliveTextColor !default;
$greenBorderColor  : $greenTextColor !default;
$tealBorderColor   : $tealTextColor !default;
$blueBorderColor   : $blueTextColor !default;
$violetBorderColor : $violetTextColor !default;
$purpleBorderColor : $purpleTextColor !default;
$pinkBorderColor   : $pinkTextColor !default;
$brownBorderColor  : $brownTextColor !default;

/*-------------------
     Alpha Colors
--------------------*/

$subtleTransparentBlack     : rgba(0, 0, 0, 0.03) !default;
$transparentBlack           : rgba(0, 0, 0, 0.05) !default;
$strongTransparentBlack     : rgba(0, 0, 0, 0.10) !default;
$veryStrongTransparentBlack : rgba(0, 0, 0, 0.15) !default;

$subtleTransparentWhite     : rgba(255, 255, 255, 0.02) !default;
$transparentWhite           : rgba(255, 255, 255, 0.08) !default;
$strongTransparentWhite     : rgba(255, 255, 255, 0.15) !default;



/*-------------------
    Brand Colors
--------------------*/

$primaryColor        : $blue !default;
$secondaryColor      : $black !default;

$lightPrimaryColor   : $lightBlue !default;
$lightSecondaryColor : $lightBlack !default;

/*--------------
  Page Heading
---------------*/

$headerFontWeight : bold !default;
$headerLineHeight : calc(18 / 14) * 1em !default;

$h1 : calc(28 / 14) * 1rem !default;
$h2 : calc(24 / 14) * 1rem !default;
$h3 : calc(18 / 14) * 1rem !default;
$h4 : calc(15 / 14) * 1rem !default;
$h5 : calc(14 / 14) * 1rem !default;


/*-------------------
        Page
--------------------*/

$pageBackground      : #FFFFFF !default;
$pageOverflowX       : hidden !default;

$lineHeight          : 1.4285em !default;
$textColor           : rgba(0, 0, 0, 0.87) !default;


/*--------------
   Form Input
---------------*/

/* This adjusts the default form input across all elements */
$inputBackground        : $white !default;
$inputVerticalPadding   : $relative11px !default;
$inputHorizontalPadding : $relative14px !default;
$inputPadding           : $inputVerticalPadding $inputHorizontalPadding !default;

/* Input Text Color */
$inputColor: $textColor !default;
$inputPlaceholderColor: color.adjust($inputColor, $lightness: 75%) !default;
$inputPlaceholderFocusColor: color.adjust($inputColor, $lightness: 45%) !default;

/* Line Height Default For Inputs in Browser (Descendors are 17px at 14px base em) */
$inputLineHeight: calc(17 / 14) * 1em !default;

/*-------------------
    Focused Input
--------------------*/

/* Used on inputs, textarea etc */
$focusedFormBorderColor: #85B7D9 !default;

/* Used on dropdowns, other larger blocks */
$focusedFormMutedBorderColor: #96C8DA !default;

/*-------------------
        Sizes
--------------------*/

/*
  Sizes are all expressed in terms of 14px/em (default em)
  This ensures these "ratios" remain constant despite changes in EM
*/

$miniSize        : calc(11 / 14) !default;
$tinySize        : calc(12 / 14) !default;
$smallSize       : calc(13 / 14) !default;
$mediumSize      : calc(14 / 14) !default;
$largeSize       : calc(16 / 14) !default;
$bigSize         : calc(18 / 14) !default;
$hugeSize        : calc(20 / 14) !default;
$massiveSize     : calc(24 / 14) !default;


/*-------------------
      Paragraph
--------------------*/

$paragraphMargin     : 0em 0em 1em !default;
$paragraphLineHeight : $lineHeight !default;

/*-------------------
       Links
--------------------*/

$linkColor           : #4183C4 !default;
$linkUnderline       : none !default;
$linkHoverColor      : color.adjust(color.adjust($linkColor, $saturation: 20%), $lightness: -15%) !default;
$linkHoverUnderline  : $linkUnderline !default;

/*-------------------
  Highlighted Text
--------------------*/

$highlightBackground      : #CCE2FF !default;
$highlightColor           : $textColor !default;

$inputHighlightBackground : rgba(100, 100, 100, 0.4) !default;
$inputHighlightColor      : $textColor !default;

/*-------------------
       Em Sizes
--------------------*/

/*
  This rounds $size values to the closest pixel then expresses that value in (r)em.
  This ensures all size values round to exact pixels
*/
$mini            : calc(math.round($miniSize * $emSize) / $emSize) * 1rem !default;
$tiny            : calc(math.round($tinySize * $emSize) / $emSize) * 1rem !default;
$small           : calc(math.round($smallSize * $emSize) / $emSize) * 1rem !default;
$medium          : calc(math.round($mediumSize * $emSize) / $emSize) * 1rem !default;
$large           : calc(math.round($largeSize * $emSize) / $emSize) * 1rem !default;
$big             : calc(math.round($bigSize * $emSize) / $emSize) * 1rem !default;
$huge            : calc(math.round($hugeSize * $emSize) / $emSize) * 1rem !default;
$massive         : calc(math.round($massiveSize * $emSize) / $emSize) * 1rem !default;

/* em */
$relativeMini    : calc(math.round($miniSize * $emSize) / $emSize) * 1em !default;
$relativeTiny    : calc(math.round($tinySize * $emSize) / $emSize) * 1em !default;
$relativeSmall   : calc(math.round($smallSize * $emSize) / $emSize) * 1em !default;
$relativeMedium  : calc(math.round($mediumSize * $emSize) / $emSize) * 1em !default;
$relativeLarge   : calc(math.round($largeSize * $emSize) / $emSize) * 1em !default;
$relativeBig     : calc(math.round($bigSize * $emSize) / $emSize) * 1em !default;
$relativeHuge    : calc(math.round($hugeSize * $emSize) / $emSize) * 1em !default;
$relativeMassive : calc(math.round($massiveSize * $emSize) / $emSize) * 1em !default;

/* rem */
$absoluteMini    : calc(math.round($miniSize * $emSize) / $emSize) * 1rem !default;
$absoluteTiny    : calc(math.round($tinySize * $emSize) / $emSize) * 1rem !default;
$absoluteSmall   : calc(math.round($smallSize * $emSize) / $emSize) * 1rem !default;
$absoluteMedium  : calc(math.round($mediumSize * $emSize) / $emSize) * 1rem !default;
$absoluteLarge   : calc(math.round($largeSize * $emSize) / $emSize) * 1rem !default;
$absoluteBig     : calc(math.round($bigSize * $emSize) / $emSize) * 1rem !default;
$absoluteHuge    : calc(math.round($hugeSize * $emSize) / $emSize) * 1rem !default;
$absoluteMassive : calc(math.round($massiveSize * $emSize) / $emSize) * 1rem !default;


/*-------------------
       Loader
--------------------*/

$loaderSize              : $relativeBig !default;
$loaderSpeed             : 0.6s !default;
$loaderLineWidth         : 0.2em !default;
$loaderFillColor         : rgba(0, 0, 0, 0.1) !default;
$loaderLineColor         : $grey !default;

$invertedLoaderFillColor : rgba(255, 255, 255, 0.15) !default;
$invertedLoaderLineColor : $white !default;

/*-------------------
        Grid
--------------------*/

$columnCount: 16 !default;

/*-------------------
     Transitions
--------------------*/

$defaultDuration : 0.1s !default;
$defaultEasing   : ease !default;

/*-------------------
     Breakpoints
--------------------*/

$mobileBreakpoint            : 320px !default;
$tabletBreakpoint            : 768px !default;
$computerBreakpoint          : 992px !default;
$largeMonitorBreakpoint      : 1200px !default;
$widescreenMonitorBreakpoint : 1920px !default;



/* Columns */
$oneWide        : calc(1 / $columnCount * 100%) !default;
$twoWide        : calc(2 / $columnCount * 100%) !default;
$threeWide      : calc(3 / $columnCount * 100%) !default;
$fourWide       : calc(4 / $columnCount * 100%) !default;
$fiveWide       : calc(5 / $columnCount * 100%) !default;
$sixWide        : calc(6 / $columnCount * 100%) !default;
$sevenWide      : calc(7 / $columnCount * 100%) !default;
$eightWide      : calc(8 / $columnCount * 100%) !default;
$nineWide       : calc(9 / $columnCount * 100%) !default;
$tenWide        : calc(10 / $columnCount * 100%) !default;
$elevenWide     : calc(11 / $columnCount * 100%) !default;
$twelveWide     : calc(12 / $columnCount * 100%) !default;
$thirteenWide   : calc(13 / $columnCount * 100%) !default;
$fourteenWide   : calc(14 / $columnCount * 100%) !default;
$fifteenWide    : calc(15 / $columnCount * 100%) !default;
$sixteenWide    : calc(16 / $columnCount * 100%) !default;

$oneColumn      : calc(1 / 1 * 100%) !default;
$twoColumn      : calc(1 / 2 * 100%) !default;
$threeColumn    : calc(1 / 3 * 100%) !default;
$fourColumn     : calc(1 / 4 * 100%) !default;
$fiveColumn     : calc(1 / 5 * 100%) !default;
$sixColumn      : calc(1 / 6 * 100%) !default;
$sevenColumn    : calc(1 / 7 * 100%) !default;
$eightColumn    : calc(1 / 8 * 100%) !default;
$nineColumn     : calc(1 / 9 * 100%) !default;
$tenColumn      : calc(1 / 10 * 100%) !default;
$elevenColumn   : calc(1 / 11 * 100%) !default;
$twelveColumn   : calc(1 / 12 * 100%) !default;
$thirteenColumn : calc(1 / 13 * 100%) !default;
$fourteenColumn : calc(1 / 14 * 100%) !default;
$fifteenColumn  : calc(1 / 15 * 100%) !default;
$sixteenColumn  : calc(1 / 16 * 100%) !default;


/*******************************
           Power-User
*******************************/


/*-------------------
    Emotive Colors
--------------------*/

/* Positive */
$positiveColor           : $green !default;
$positiveBackgroundColor : #FCFFF5 !default;
$positiveBorderColor     : #A3C293 !default;
$positiveHeaderColor     : #1A531B !default;
$positiveTextColor       : #2C662D !default;

/* Negative */
$negativeColor           : $red !default;
$negativeBackgroundColor : #FFF6F6 !default;
$negativeBorderColor     : #E0B4B4 !default;
$negativeHeaderColor     : #912D2B !default;
$negativeTextColor       : #9F3A38 !default;

/* Info */
$infoColor              : #31CCEC !default;
$infoBackgroundColor    : #F8FFFF !default;
$infoBorderColor        : #A9D5DE !default;
$infoHeaderColor        : #0E566C !default;
$infoTextColor          : #276F86 !default;

/* Warning */
$warningColor           : #F2C037 !default;
$warningBorderColor     : #C9BA9B !default;
$warningBackgroundColor : #FFFAF3 !default;
$warningHeaderColor     : #794B02 !default;
$warningTextColor       : #573A08 !default;

/*-------------------
        Paths
--------------------*/

/* For source only. Modified in gulp for dist */
$imagePath : '../../themes/default/assets/images' !default;
$fontPath  : '../../themes/default/assets/fonts' !default;


/*-------------------
       Icons
--------------------*/

/* Maximum Glyph Width of Icon */
$iconWidth : 1.18em !default;

/*-------------------
     Neutral Text
--------------------*/

$darkTextColor               : rgba(0, 0, 0, 0.85) !default;
$mutedTextColor              : rgba(0, 0, 0, 0.6) !default;
$lightTextColor              : rgba(0, 0, 0, 0.4) !default;

$unselectedTextColor         : rgba(0, 0, 0, 0.4) !default;
$hoveredTextColor            : rgba(0, 0, 0, 0.8) !default;
$pressedTextColor            : rgba(0, 0, 0, 0.9) !default;
$selectedTextColor           : rgba(0, 0, 0, 0.95) !default;
$disabledTextColor           : rgba(0, 0, 0, 0.2) !default;

$invertedTextColor           : rgba(255, 255, 255, 0.9) !default;
$invertedMutedTextColor      : rgba(255, 255, 255, 0.8) !default;
$invertedLightTextColor      : rgba(255, 255, 255, 0.7) !default;
$invertedUnselectedTextColor : rgba(255, 255, 255, 0.5) !default;
$invertedHoveredTextColor    : rgba(255, 255, 255, 1) !default;
$invertedPressedTextColor    : rgba(255, 255, 255, 1) !default;
$invertedSelectedTextColor   : rgba(255, 255, 255, 1) !default;
$invertedDisabledTextColor   : rgba(255, 255, 255, 0.2) !default;

/*-------------------
     Brand Colors
--------------------*/

$facebookColor   : #3B5998 !default;
$twitterColor    : #55ACEE !default;
$googlePlusColor : #DD4B39 !default;
$linkedInColor   : #1F88BE !default;
$youtubeColor    : #CC181E !default;
$pinterestColor  : #BD081C !default;
$vkColor         : #4D7198 !default;
$instagramColor  : #49769C !default;

/*-------------------
      Borders
--------------------*/

$circularRadius                : 500rem !default;

$borderColor               : rgba(34, 36, 38, 0.15) !default;
$strongBorderColor         : rgba(34, 36, 38, 0.22) !default;
$internalBorderColor       : rgba(34, 36, 38, 0.1) !default;
$selectedBorderColor       : rgba(34, 36, 38, 0.35) !default;
$strongSelectedBorderColor : rgba(34, 36, 38, 0.5) !default;
$disabledBorderColor       : rgba(34, 36, 38, 0.5) !default;

$solidInternalBorderColor  : #FAFAFA !default;
$solidBorderColor          : #D4D4D5 !default;
$solidSelectedBorderColor  : #BCBDBD !default;

$whiteBorderColor              : rgba(255, 255, 255, 0.1) !default;
$selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8) !default;

$solidWhiteBorderColor         : #555555 !default;
$selectedSolidWhiteBorderColor : #999999 !default;

/*-------------------
       Accents
--------------------*/

/* Differentiating Neutrals */
$subtleGradient: linear-gradient(transparent, $transparentBlack) !default;

/* Differentiating Layers */
$subtleShadow:
  0px 1px 2px 0 $borderColor
 !default;
$floatingShadow:
  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
  0px 2px 10px 0px rgba(34, 36, 38, 0.15)
 !default;


/*-------------------
    Derived Values
--------------------*/

/* Loaders Position Offset */
$loaderOffset : - calc($loaderSize / 2) !default;
$loaderMargin : $loaderOffset 0em 0em $loaderOffset !default;

/* Rendered Scrollbar Width */
$scrollbarWidth: 17px !default;

/* Maximum Single Character Glyph Width, aka Capital "W" */
$glyphWidth: 1.1em !default;

/* Used to match floats with text */
$lineHeightOffset       : calc(($lineHeight - 1em) / 2) !default;
$headerLineHeightOffset : calc(($headerLineHeight - 1em) / 2) !default;

/* Header Spacing */
$headerTopMargin    : calc(2rem - #{$headerLineHeightOffset}) !default;
$headerBottomMargin : 1rem !default;

/* Minimum Mobile Width */
$pageMinWidth       : 320px !default;

/* Positive / Negative Dupes */
$successBackgroundColor : $positiveBackgroundColor !default;
$successColor           : $positiveColor !default;
$successBorderColor     : $positiveBorderColor !default;
$successHeaderColor     : $positiveHeaderColor !default;
$successTextColor       : $positiveTextColor !default;

$errorBackgroundColor   : $negativeBackgroundColor !default;
$errorColor             : $negativeColor !default;
$errorBorderColor       : $negativeBorderColor !default;
$errorHeaderColor       : $negativeHeaderColor !default;
$errorTextColor         : $negativeTextColor !default;


/* Responsive */
$largestMobileScreen : ($tabletBreakpoint - 1px) !default;
$largestTabletScreen : ($computerBreakpoint - 1px) !default;
$largestSmallMonitor : ($largeMonitorBreakpoint - 1px) !default;
$largestLargeMonitor : ($widescreenMonitorBreakpoint - 1px) !default;



/*******************************
             States
*******************************/

/*-------------------
      Disabled
--------------------*/

$disabledOpacity: 0.45 !default;
$disabledTextColor: rgba(40, 40, 40, 0.3) !default;
$invertedDisabledTextColor: rgba(225, 225, 225, 0.3) !default;

/*-------------------
        Hover
--------------------*/

/*---  Shadows  ---*/
$floatingShadowHover:
  0px 2px 4px 0px rgba(34, 36, 38, 0.15),
  0px 2px 10px 0px rgba(34, 36, 38, 0.25)
 !default;

/*---  Colors  ---*/
$primaryColorHover    : color.adjust(color.adjust($primaryColor, $lightness: -5%), $saturation: 10%) !default;
$secondaryColorHover  : color.adjust(color.adjust($secondaryColor, $lightness: 5%), $saturation: 10%) !default;

$redHover             : color.adjust(color.adjust($red, $lightness: -5%), $saturation: 10%) !default;
$orangeHover          : color.adjust(color.adjust($orange, $lightness: -5%), $saturation: 10%) !default;
$yellowHover          : color.adjust(color.adjust($yellow, $lightness: -5%), $saturation: 10%) !default;
$oliveHover           : color.adjust(color.adjust($olive, $lightness: -5%), $saturation: 10%) !default;
$greenHover           : color.adjust(color.adjust($green, $lightness: -5%), $saturation: 10%) !default;
$tealHover            : color.adjust(color.adjust($teal, $lightness: -5%), $saturation: 10%) !default;
$blueHover            : color.adjust(color.adjust($blue, $lightness: -5%), $saturation: 10%) !default;
$violetHover          : color.adjust(color.adjust($violet, $lightness: -5%), $saturation: 10%) !default;
$purpleHover          : color.adjust(color.adjust($purple, $lightness: -5%), $saturation: 10%) !default;
$pinkHover            : color.adjust(color.adjust($pink, $lightness: -5%), $saturation: 10%) !default;
$brownHover           : color.adjust(color.adjust($brown, $lightness: -5%), $saturation: 10%) !default;

$lightRedHover        : color.adjust(color.adjust($lightRed, $lightness: -5%), $saturation: 10%) !default;
$lightOrangeHover     : color.adjust(color.adjust($lightOrange, $lightness: -5%), $saturation: 10%) !default;
$lightYellowHover     : color.adjust(color.adjust($lightYellow, $lightness: -5%), $saturation: 10%) !default;
$lightOliveHover      : color.adjust(color.adjust($lightOlive, $lightness: -5%), $saturation: 10%) !default;
$lightGreenHover      : color.adjust(color.adjust($lightGreen, $lightness: -5%), $saturation: 10%) !default;
$lightTealHover       : color.adjust(color.adjust($lightTeal, $lightness: -5%), $saturation: 10%) !default;
$lightBlueHover       : color.adjust(color.adjust($lightBlue, $lightness: -5%), $saturation: 10%) !default;
$lightVioletHover     : color.adjust(color.adjust($lightViolet, $lightness: -5%), $saturation: 10%) !default;
$lightPurpleHover     : color.adjust(color.adjust($lightPurple, $lightness: -5%), $saturation: 10%) !default;
$lightPinkHover       : color.adjust(color.adjust($lightPink, $lightness: -5%), $saturation: 10%) !default;
$lightBrownHover      : color.adjust(color.adjust($lightBrown, $lightness: -5%), $saturation: 10%) !default;
$lightGreyHover       : color.adjust(color.adjust($lightGrey, $lightness: -5%), $saturation: 10%) !default;
$lightBlackHover      : color.adjust(color.adjust($fullBlack, $lightness: -5%), $saturation: 10%) !default;

/*---  Emotive  ---*/
$positiveColorHover   : color.adjust(color.adjust($positiveColor, $lightness: -5%), $saturation: 10%) !default;
$negativeColorHover   : color.adjust(color.adjust($negativeColor, $lightness: -5%), $saturation: 10%) !default;

/*---  Brand   ---*/
$facebookHoverColor   : color.adjust(color.adjust($facebookColor, $lightness: -5%), $saturation: 10%) !default;
$twitterHoverColor    : color.adjust(color.adjust($twitterColor, $lightness: -5%), $saturation: 10%) !default;
$googlePlusHoverColor : color.adjust(color.adjust($googlePlusColor, $lightness: -5%), $saturation: 10%) !default;
$linkedInHoverColor   : color.adjust(color.adjust($linkedInColor, $lightness: -5%), $saturation: 10%) !default;
$youtubeHoverColor    : color.adjust(color.adjust($youtubeColor, $lightness: -5%), $saturation: 10%) !default;
$instagramHoverColor  : color.adjust(color.adjust($instagramColor, $lightness: -5%), $saturation: 10%) !default;
$pinterestHoverColor  : color.adjust(color.adjust($pinterestColor, $lightness: -5%), $saturation: 10%) !default;
$vkHoverColor         : color.adjust(color.adjust($vkColor, $lightness: -5%), $saturation: 10%) !default;

/*---  Dark Tones  ---*/
$fullBlackHover       : color.adjust($fullBlack, $lightness: 5%) !default;
$blackHover           : color.adjust($black, $lightness: 5%) !default;
$greyHover            : color.adjust($grey, $lightness: 5%) !default;

/*---  Light Tones  ---*/
$whiteHover           : color.adjust($white, $lightness: -5%) !default;
$offWhiteHover        : color.adjust($offWhite, $lightness: -5%) !default;
$darkWhiteHover       : color.adjust($darkWhite, $lightness: -5%) !default;

/*-------------------
        Focus
--------------------*/

/*---  Colors  ---*/
$primaryColorFocus    : color.adjust(color.adjust($primaryColor, $lightness: -8%), $saturation: 20%) !default;
$secondaryColorFocus  : color.adjust(color.adjust($secondaryColor, $lightness: 8%), $saturation: 20%) !default;

$redFocus             : color.adjust(color.adjust($red, $lightness: -8%), $saturation: 20%) !default;
$orangeFocus          : color.adjust(color.adjust($orange, $lightness: -8%), $saturation: 20%) !default;
$yellowFocus          : color.adjust(color.adjust($yellow, $lightness: -8%), $saturation: 20%) !default;
$oliveFocus           : color.adjust(color.adjust($olive, $lightness: -8%), $saturation: 20%) !default;
$greenFocus           : color.adjust(color.adjust($green, $lightness: -8%), $saturation: 20%) !default;
$tealFocus            : color.adjust(color.adjust($teal, $lightness: -8%), $saturation: 20%) !default;
$blueFocus            : color.adjust(color.adjust($blue, $lightness: -8%), $saturation: 20%) !default;
$violetFocus          : color.adjust(color.adjust($violet, $lightness: -8%), $saturation: 20%) !default;
$purpleFocus          : color.adjust(color.adjust($purple, $lightness: -8%), $saturation: 20%) !default;
$pinkFocus            : color.adjust(color.adjust($pink, $lightness: -8%), $saturation: 20%) !default;
$brownFocus           : color.adjust(color.adjust($brown, $lightness: -8%), $saturation: 20%) !default;

$lightRedFocus        : color.adjust(color.adjust($lightRed, $lightness: -8%), $saturation: 20%) !default;
$lightOrangeFocus     : color.adjust(color.adjust($lightOrange, $lightness: -8%), $saturation: 20%) !default;
$lightYellowFocus     : color.adjust(color.adjust($lightYellow, $lightness: -8%), $saturation: 20%) !default;
$lightOliveFocus      : color.adjust(color.adjust($lightOlive, $lightness: -8%), $saturation: 20%) !default;
$lightGreenFocus      : color.adjust(color.adjust($lightGreen, $lightness: -8%), $saturation: 20%) !default;
$lightTealFocus       : color.adjust(color.adjust($lightTeal, $lightness: -8%), $saturation: 20%) !default;
$lightBlueFocus       : color.adjust(color.adjust($lightBlue, $lightness: -8%), $saturation: 20%) !default;
$lightVioletFocus     : color.adjust(color.adjust($lightViolet, $lightness: -8%), $saturation: 20%) !default;
$lightPurpleFocus     : color.adjust(color.adjust($lightPurple, $lightness: -8%), $saturation: 20%) !default;
$lightPinkFocus       : color.adjust(color.adjust($lightPink, $lightness: -8%), $saturation: 20%) !default;
$lightBrownFocus      : color.adjust(color.adjust($lightBrown, $lightness: -8%), $saturation: 20%) !default;
$lightGreyFocus       : color.adjust(color.adjust($lightGrey, $lightness: -8%), $saturation: 20%) !default;
$lightBlackFocus      : color.adjust(color.adjust($fullBlack, $lightness: -8%), $saturation: 20%) !default;

/*---  Emotive  ---*/
$positiveColorFocus   : color.adjust(color.adjust($positiveColor, $lightness: -8%), $saturation: 20%) !default;
$negativeColorFocus   : color.adjust(color.adjust($negativeColor, $lightness: -8%), $saturation: 20%) !default;

/*---  Brand   ---*/
$facebookFocusColor   : color.adjust(color.adjust($facebookColor, $lightness: -8%), $saturation: 20%) !default;
$twitterFocusColor    : color.adjust(color.adjust($twitterColor, $lightness: -8%), $saturation: 20%) !default;
$googlePlusFocusColor : color.adjust(color.adjust($googlePlusColor, $lightness: -8%), $saturation: 20%) !default;
$linkedInFocusColor   : color.adjust(color.adjust($linkedInColor, $lightness: -8%), $saturation: 20%) !default;
$youtubeFocusColor    : color.adjust(color.adjust($youtubeColor, $lightness: -8%), $saturation: 20%) !default;
$instagramFocusColor  : color.adjust(color.adjust($instagramColor, $lightness: -8%), $saturation: 20%) !default;
$pinterestFocusColor  : color.adjust(color.adjust($pinterestColor, $lightness: -8%), $saturation: 20%) !default;
$vkFocusColor         : color.adjust(color.adjust($vkColor, $lightness: -8%), $saturation: 20%) !default;

/*---  Dark Tones  ---*/
$fullBlackFocus       : color.adjust($fullBlack, $lightness: 8%) !default;
$blackFocus           : color.adjust($black, $lightness: 8%) !default;
$greyFocus            : color.adjust($grey, $lightness: 8%) !default;

/*---  Light Tones  ---*/
$whiteFocus           : color.adjust($white, $lightness: -8%) !default;
$offWhiteFocus        : color.adjust($offWhite, $lightness: -8%) !default;
$darkWhiteFocus       : color.adjust($darkWhite, $lightness: -8%) !default;


/*-------------------
    Down (:active)
--------------------*/

/*---  Colors  ---*/
$primaryColorDown    : color.adjust($primaryColor, $lightness: -10%) !default;
$secondaryColorDown  : color.adjust($secondaryColor, $lightness: 10%) !default;

$redDown             : color.adjust($red, $lightness: -10%) !default;
$orangeDown          : color.adjust($orange, $lightness: -10%) !default;
$yellowDown          : color.adjust($yellow, $lightness: -10%) !default;
$oliveDown           : color.adjust($olive, $lightness: -10%) !default;
$greenDown           : color.adjust($green, $lightness: -10%) !default;
$tealDown            : color.adjust($teal, $lightness: -10%) !default;
$blueDown            : color.adjust($blue, $lightness: -10%) !default;
$violetDown          : color.adjust($violet, $lightness: -10%) !default;
$purpleDown          : color.adjust($purple, $lightness: -10%) !default;
$pinkDown            : color.adjust($pink, $lightness: -10%) !default;
$brownDown           : color.adjust($brown, $lightness: -10%) !default;

$lightRedDown        : color.adjust($lightRed, $lightness: -10%) !default;
$lightOrangeDown     : color.adjust($lightOrange, $lightness: -10%) !default;
$lightYellowDown     : color.adjust($lightYellow, $lightness: -10%) !default;
$lightOliveDown      : color.adjust($lightOlive, $lightness: -10%) !default;
$lightGreenDown      : color.adjust($lightGreen, $lightness: -10%) !default;
$lightTealDown       : color.adjust($lightTeal, $lightness: -10%) !default;
$lightBlueDown       : color.adjust($lightBlue, $lightness: -10%) !default;
$lightVioletDown     : color.adjust($lightViolet, $lightness: -10%) !default;
$lightPurpleDown     : color.adjust($lightPurple, $lightness: -10%) !default;
$lightPinkDown       : color.adjust($lightPink, $lightness: -10%) !default;
$lightBrownDown      : color.adjust($lightBrown, $lightness: -10%) !default;
$lightGreyDown       : color.adjust($lightGrey, $lightness: -10%) !default;
$lightBlackDown      : color.adjust($fullBlack, $lightness: -10%) !default;

/*---  Emotive  ---*/
$positiveColorDown   : color.adjust($positiveColor, $lightness: -10%) !default;
$negativeColorDown   : color.adjust($negativeColor, $lightness: -10%) !default;

/*---  Brand   ---*/
$facebookDownColor   : color.adjust($facebookColor, $lightness: -10%) !default;
$twitterDownColor    : color.adjust($twitterColor, $lightness: -10%) !default;
$googlePlusDownColor : color.adjust($googlePlusColor, $lightness: -10%) !default;
$linkedInDownColor   : color.adjust($linkedInColor, $lightness: -10%) !default;
$youtubeDownColor    : color.adjust($youtubeColor, $lightness: -10%) !default;
$instagramDownColor  : color.adjust($instagramColor, $lightness: -10%) !default;
$pinterestDownColor  : color.adjust($pinterestColor, $lightness: -10%) !default;
$vkDownColor         : color.adjust($vkColor, $lightness: -10%) !default;

/*---  Dark Tones  ---*/
$fullBlackDown       : color.adjust($fullBlack, $lightness: 10%) !default;
$blackDown           : color.adjust($black, $lightness: 10%) !default;
$greyDown            : color.adjust($grey, $lightness: 10%) !default;

/*---  Light Tones  ---*/
$whiteDown           : color.adjust($white, $lightness: -10%) !default;
$offWhiteDown        : color.adjust($offWhite, $lightness: -10%) !default;
$darkWhiteDown       : color.adjust($darkWhite, $lightness: -10%) !default;


/*-------------------
        Active
--------------------*/

/*---  Colors  ---*/
$primaryColorActive    : color.adjust(color.adjust($primaryColor, $lightness: -5%), $saturation: 15%) !default;
$secondaryColorActive  : color.adjust(color.adjust($secondaryColor, $lightness: 5%), $saturation: 15%) !default;

$redActive             : color.adjust(color.adjust($red, $lightness: -5%), $saturation: 15%) !default;
$orangeActive          : color.adjust(color.adjust($orange, $lightness: -5%), $saturation: 15%) !default;
$yellowActive          : color.adjust(color.adjust($yellow, $lightness: -5%), $saturation: 15%) !default;
$oliveActive           : color.adjust(color.adjust($olive, $lightness: -5%), $saturation: 15%) !default;
$greenActive           : color.adjust(color.adjust($green, $lightness: -5%), $saturation: 15%) !default;
$tealActive            : color.adjust(color.adjust($teal, $lightness: -5%), $saturation: 15%) !default;
$blueActive            : color.adjust(color.adjust($blue, $lightness: -5%), $saturation: 15%) !default;
$violetActive          : color.adjust(color.adjust($violet, $lightness: -5%), $saturation: 15%) !default;
$purpleActive          : color.adjust(color.adjust($purple, $lightness: -5%), $saturation: 15%) !default;
$pinkActive            : color.adjust(color.adjust($pink, $lightness: -5%), $saturation: 15%) !default;
$brownActive           : color.adjust(color.adjust($brown, $lightness: -5%), $saturation: 15%) !default;

$lightRedActive        : color.adjust(color.adjust($lightRed, $lightness: -5%), $saturation: 15%) !default;
$lightOrangeActive     : color.adjust(color.adjust($lightOrange, $lightness: -5%), $saturation: 15%) !default;
$lightYellowActive     : color.adjust(color.adjust($lightYellow, $lightness: -5%), $saturation: 15%) !default;
$lightOliveActive      : color.adjust(color.adjust($lightOlive, $lightness: -5%), $saturation: 15%) !default;
$lightGreenActive      : color.adjust(color.adjust($lightGreen, $lightness: -5%), $saturation: 15%) !default;
$lightTealActive       : color.adjust(color.adjust($lightTeal, $lightness: -5%), $saturation: 15%) !default;
$lightBlueActive       : color.adjust(color.adjust($lightBlue, $lightness: -5%), $saturation: 15%) !default;
$lightVioletActive     : color.adjust(color.adjust($lightViolet, $lightness: -5%), $saturation: 15%) !default;
$lightPurpleActive     : color.adjust(color.adjust($lightPurple, $lightness: -5%), $saturation: 15%) !default;
$lightPinkActive       : color.adjust(color.adjust($lightPink, $lightness: -5%), $saturation: 15%) !default;
$lightBrownActive      : color.adjust(color.adjust($lightBrown, $lightness: -5%), $saturation: 15%) !default;
$lightGreyActive       : color.adjust(color.adjust($lightGrey, $lightness: -5%), $saturation: 15%) !default;
$lightBlackActive      : color.adjust(color.adjust($fullBlack, $lightness: -5%), $saturation: 15%) !default;

/*---  Emotive  ---*/
$positiveColorActive   : color.adjust(color.adjust($positiveColor, $lightness: -5%), $saturation: 15%) !default;
$negativeColorActive   : color.adjust(color.adjust($negativeColor, $lightness: -5%), $saturation: 15%) !default;

/*---  Brand   ---*/
$facebookActiveColor   : color.adjust(color.adjust($facebookColor, $lightness: -5%), $saturation: 15%) !default;
$twitterActiveColor    : color.adjust(color.adjust($twitterColor, $lightness: -5%), $saturation: 15%) !default;
$googlePlusActiveColor : color.adjust(color.adjust($googlePlusColor, $lightness: -5%), $saturation: 15%) !default;
$linkedInActiveColor   : color.adjust(color.adjust($linkedInColor, $lightness: -5%), $saturation: 15%) !default;
$youtubeActiveColor    : color.adjust(color.adjust($youtubeColor, $lightness: -5%), $saturation: 15%) !default;
$instagramActiveColor  : color.adjust(color.adjust($instagramColor, $lightness: -5%), $saturation: 15%) !default;
$pinterestActiveColor  : color.adjust(color.adjust($pinterestColor, $lightness: -5%), $saturation: 15%) !default;
$vkActiveColor         : color.adjust(color.adjust($vkColor, $lightness: -5%), $saturation: 15%) !default;

/*---  Dark Tones  ---*/
$fullBlackActive       : color.adjust($fullBlack, $lightness: -5%) !default;
$blackActive           : color.adjust($black, $lightness: -5%) !default;
$greyActive            : color.adjust($grey, $lightness: -5%) !default;

/*---  Light Tones  ---*/
$whiteActive           : color.adjust($white, $lightness: -5%) !default;
$offWhiteActive        : color.adjust($offWhite, $lightness: -5%) !default;
$darkWhiteActive       : color.adjust($darkWhite, $lightness: -5%) !default;