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

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

@fontName          : 'Lato';
@fontSmoothing     : antialiased;

@headerFont        : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;
@pageFont          : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif;

@googleFontName    : @fontName;
@importGoogleFonts : true;
@googleFontSizes   : '400,700,400italic,700italic';
@googleSubset      : 'latin';

@googleProtocol    : 'https://';
@googleFontRequest : '@{googleFontName}:@{googleFontSizes}&subset=@{googleSubset}';

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

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

/* The size of page text  */
@fontSize : 14px;

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

/* See Power-user section below
   for explanation of @px variables
*/
@relativeBorderRadius: @relative4px;
@absoluteBorderRadius: @4px;

@defaultBorderRadius: @absoluteBorderRadius;

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

@primaryColor        : @blue;
@secondaryColor      : @black;

@lightPrimaryColor   : @lightBlue;
@lightSecondaryColor : @lightBlack;

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

@headerFontWeight : bold;
@headerLineHeight : 1.2857em;

@h1 : 2rem;
@h2 : 1.714rem;
@h3 : 1.28rem;
@h4 : 1.071rem;
@h5 : 1rem;

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

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

/* Line Height Default For Inputs in Browser */
@inputLineHeight: 1.2142em;

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

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

@miniSize        : (10 / 14);
@tinySize        : (12 / 14);
@smallSize       : (13 / 14);
@mediumSize      : (14 / 14);
@largeSize       : (16 / 14);
@bigSize         : (18 / 14);
@hugeSize        : (20 / 14);
@massiveSize     : (24 / 14);


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

@pageBackground      : #FFFFFF;
@pageOverflowX       : hidden;

@lineHeight          : 1.4285em;
@textColor           : rgba(0, 0, 0, 0.87);

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

@paragraphMargin     : 0em 0em 1em;
@paragraphLineHeight : @lineHeight;

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

@linkColor           : #4183C4;
@linkUnderline       : none;
@linkHoverColor      : darken(saturate(@linkColor, 20), 15, relative);
@linkHoverUnderline  : @linkUnderline;

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

@highlightBackground      : #CCE2FF;
@highlightColor           : @textColor;

@inputHighlightBackground : rgba(100, 100, 100, 0.4);
@inputHighlightColor      : @textColor;


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

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

@invertedLoaderFillColor : rgba(255, 255, 255, 0.15);
@invertedLoaderLineColor : @white;

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

@columnCount: 16;

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

@defaultDuration : 0.1s;
@defaultEasing   : ease;

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

@mobileBreakpoint            : 320px;
@tabletBreakpoint            : 768px;
@computerBreakpoint          : 992px;
@largeMonitorBreakpoint      : 1200px;
@widescreenMonitorBreakpoint : 1920px;

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

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

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

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

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

/*--- Colored Headers ---*/
@redHeaderColor    : darken(@redTextColor, 5);
@oliveHeaderColor  : darken(@oliveTextColor, 5);
@greenHeaderColor  : darken(@greenTextColor, 5);
@yellowHeaderColor : darken(@yellowTextColor, 5);
@blueHeaderColor   : darken(@blueTextColor, 5);
@tealHeaderColor   : darken(@tealTextColor, 5);
@pinkHeaderColor   : darken(@pinkTextColor, 5);
@violetHeaderColor : darken(@violetTextColor, 5);
@purpleHeaderColor : darken(@purpleTextColor, 5);
@orangeHeaderColor : darken(@orangeTextColor, 5);
@brownHeaderColor  : darken(@brownTextColor, 5);

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



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

@subtleTransparentBlack     : rgba(0, 0, 0, 0.03);
@transparentBlack           : rgba(0, 0, 0, 0.05);
@strongTransparentBlack     : rgba(0, 0, 0, 0.10);
@veryStrongTransparentBlack : rgba(0, 0, 0, 0.15);

@subtleTransparentWhite     : rgba(255, 255, 255, 0.02);
@transparentWhite           : rgba(255, 255, 255, 0.08);
@strongTransparentWhite     : rgba(255, 255, 255, 0.15);

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

/* Differentiating Neutrals */
@subtleGradient: linear-gradient(transparent, @transparentBlack);

/* Differentiating Layers */
@subtleShadow:
  0px 1px 2px 0 @borderColor
;
@floatingShadow:
  0px 2px 4px 0px rgba(34, 36, 38, 0.12),
  0px 2px 10px 0px rgba(34, 36, 38, 0.08)
;

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


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

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

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

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

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

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

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

/*-------------------
       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            : unit( round(@miniSize * @emSize) / @emSize, rem);
@tiny            : unit( round(@tinySize * @emSize) / @emSize, rem);
@small           : unit( round(@smallSize * @emSize) / @emSize, rem);
@medium          : unit( round(@mediumSize * @emSize) / @emSize, rem);
@large           : unit( round(@largeSize * @emSize) / @emSize, rem);
@big             : unit( round(@bigSize * @emSize) / @emSize, rem);
@huge            : unit( round(@hugeSize * @emSize) / @emSize, rem);
@massive         : unit( round(@massiveSize * @emSize) / @emSize, rem);

/* em */
@relativeMini    : unit( round(@miniSize * @emSize) / @emSize, em);
@relativeTiny    : unit( round(@tinySize * @emSize) / @emSize, em);
@relativeSmall   : unit( round(@smallSize * @emSize) / @emSize, em);
@relativeMedium  : unit( round(@mediumSize * @emSize) / @emSize, em);
@relativeLarge   : unit( round(@largeSize * @emSize) / @emSize, em);
@relativeBig     : unit( round(@bigSize * @emSize) / @emSize, em);
@relativeHuge    : unit( round(@hugeSize * @emSize) / @emSize, em);
@relativeMassive : unit( round(@massiveSize * @emSize) / @emSize, em);

/* rem */
@absoluteMini    : unit( round(@miniSize * @emSize) / @emSize, rem);
@absoluteTiny    : unit( round(@tinySize * @emSize) / @emSize, rem);
@absoluteSmall   : unit( round(@smallSize * @emSize) / @emSize, rem);
@absoluteMedium  : unit( round(@mediumSize * @emSize) / @emSize, rem);
@absoluteLarge   : unit( round(@largeSize * @emSize) / @emSize, rem);
@absoluteBig     : unit( round(@bigSize * @emSize) / @emSize, rem);
@absoluteHuge    : unit( round(@hugeSize * @emSize) / @emSize, rem);
@absoluteMassive : unit( round(@massiveSize * @emSize) / @emSize, rem);


/*-------------------
  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.

*/

@1px          : unit( (1 / @emSize), rem);
@2px          : unit( (2 / @emSize), rem);
@3px          : unit( (3 / @emSize), rem);
@4px          : unit( (4 / @emSize), rem);
@5px          : unit( (5 / @emSize), rem);
@6px          : unit( (6 / @emSize), rem);
@7px          : unit( (7 / @emSize), rem);
@8px          : unit( (8 / @emSize), rem);
@9px          : unit( (9 / @emSize), rem);
@10px         : unit( (10 / @emSize), rem);
@11px         : unit( (11 / @emSize), rem);
@12px         : unit( (12 / @emSize), rem);
@13px         : unit( (13 / @emSize), rem);
@14px         : unit( (14 / @emSize), rem);

@relative1px  : unit( (1 / @emSize), em);
@relative2px  : unit( (2 / @emSize), em);
@relative3px  : unit( (3 / @emSize), em);
@relative4px  : unit( (4 / @emSize), em);
@relative5px  : unit( (5 / @emSize), em);
@relative6px  : unit( (6 / @emSize), em);
@relative7px  : unit( (7 / @emSize), em);
@relative8px  : unit( (8 / @emSize), em);
@relative9px  : unit( (9 / @emSize), em);
@relative10px : unit( (10 / @emSize), em);
@relative11px : unit( (11 / @emSize), em);
@relative12px : unit( (12 / @emSize), em);
@relative13px : unit( (13 / @emSize), em);
@relative14px : unit( (14 / @emSize), em);

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

/* Maximum Glyph Width of Icon */
@iconWidth : 1.18em;

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

@darkTextColor               : rgba(0, 0, 0, 0.85);
@mutedTextColor              : rgba(0, 0, 0, 0.6);
@lightTextColor              : rgba(0, 0, 0, 0.4);

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

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

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

@facebookColor   : #3B5998;
@twitterColor    : #0084B4;
@googlePlusColor : #DC4A38;
@linkedInColor   : #1F88BE;
@youtubeColor    : #CC181E;
@instagramColor  : #49769C;
@pinterestColor  : #00ACED;
@vkColor         : #4D7198;

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

@circularRadius                : 500rem;

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

@solidInternalBorderColor  : #FAFAFA;
@solidBorderColor          : #D4D4D5;
@solidSelectedBorderColor  : #BCBDBD;

@whiteBorderColor              : rgba(255, 255, 255, 0.1);
@selectedWhiteBorderColor      : rgba(255, 255, 255, 0.8);

@solidWhiteBorderColor         : #555555;
@selectedSolidWhiteBorderColor : #999999;


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

/* Loaders Position Offset */
@loaderOffset : -(@loaderSize / 2);
@loaderMargin : @loaderOffset 0em 0em @loaderOffset;

/* Rendered Scrollbar Width */
@scrollbarWidth: 17px;

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

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

/* Header Spacing */
@headerTopMargin    : ~"calc(2rem - "@headerLineHeightOffset~")";
@headerBottomMargin : 1rem;
@headerMargin       : @headerTopMargin 0em @headerBottomMargin;

/* Minimum Mobile Width */
@pageMinWidth       : 320px;

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

@errorBackgroundColor   : @negativeBackgroundColor;
@errorColor             : @negativeColor;
@errorBorderColor       : @negativeBorderColor;
@errorHeaderColor       : @negativeHeaderColor;
@errorTextColor         : @negativeTextColor;


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

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

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


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

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

@disabledOpacity: 0.45;
@disabledTextColor: rgba(40, 40, 40, 0.3);
@invertedDisabledTextColor: rgba(225, 225, 225, 0.3);

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

/*---  Colors  ---*/
@primaryColorHover    : saturate(darken(@primaryColor, 5), 10, relative);
@secondaryColorHover  : saturate(lighten(@secondaryColor, 5), 10, relative);

@redHover             : saturate(darken(@red, 5), 10, relative);
@orangeHover          : saturate(darken(@orange, 5), 10, relative);
@yellowHover          : saturate(darken(@yellow, 5), 10, relative);
@oliveHover           : saturate(darken(@olive, 5), 10, relative);
@greenHover           : saturate(darken(@green, 5), 10, relative);
@tealHover            : saturate(darken(@teal, 5), 10, relative);
@blueHover            : saturate(darken(@blue, 5), 10, relative);
@violetHover          : saturate(darken(@violet, 5), 10, relative);
@purpleHover          : saturate(darken(@purple, 5), 10, relative);
@pinkHover            : saturate(darken(@pink, 5), 10, relative);
@brownHover           : saturate(darken(@brown, 5), 10, relative);

@lightRedHover        : saturate(darken(@lightRed, 5), 10, relative);
@lightOrangeHover     : saturate(darken(@lightOrange, 5), 10, relative);
@lightYellowHover     : saturate(darken(@lightYellow, 5), 10, relative);
@lightOliveHover      : saturate(darken(@lightOlive, 5), 10, relative);
@lightGreenHover      : saturate(darken(@lightGreen, 5), 10, relative);
@lightTealHover       : saturate(darken(@lightTeal, 5), 10, relative);
@lightBlueHover       : saturate(darken(@lightBlue, 5), 10, relative);
@lightVioletHover     : saturate(darken(@lightViolet, 5), 10, relative);
@lightPurpleHover     : saturate(darken(@lightPurple, 5), 10, relative);
@lightPinkHover       : saturate(darken(@lightPink, 5), 10, relative);
@lightBrownHover      : saturate(darken(@lightBrown, 5), 10, relative);
@lightGreyHover       : saturate(darken(@lightGrey, 5), 10, relative);
@lightBlackHover      : saturate(darken(@fullBlack, 5), 10, relative);

/*---  Emotive  ---*/
@positiveColorHover   : saturate(darken(@positiveColor, 5), 10, relative);
@negativeColorHover   : saturate(darken(@negativeColor, 5), 10, relative);

/*---  Brand   ---*/
@facebookHoverColor   : saturate(darken(@facebookColor, 5), 10, relative);
@twitterHoverColor    : saturate(darken(@twitterColor, 5), 10, relative);
@googlePlusHoverColor : saturate(darken(@googlePlusColor, 5), 10, relative);
@linkedInHoverColor   : saturate(darken(@linkedInColor, 5), 10, relative);
@youtubeHoverColor    : saturate(darken(@youtubeColor, 5), 10, relative);
@instagramHoverColor  : saturate(darken(@instagramColor, 5), 10, relative);
@pinterestHoverColor  : saturate(darken(@pinterestColor, 5), 10, relative);
@vkHoverColor         : saturate(darken(@vkColor, 5), 10, relative);

/*---  Dark Tones  ---*/
@fullBlackHover       : lighten(@fullBlack, 5);
@blackHover           : lighten(@black, 5);
@greyHover            : lighten(@grey, 5);

/*---  Light Tones  ---*/
@whiteHover           : darken(@white, 5);
@offWhiteHover        : darken(@offWhite, 5);
@darkWhiteHover       : darken(@darkWhite, 5);

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

/*---  Colors  ---*/
@primaryColorFocus    : saturate(darken(@primaryColor, 8), 20, relative);
@secondaryColorFocus  : saturate(lighten(@secondaryColor, 8), 20, relative);

@redFocus             : saturate(darken(@red, 8), 20, relative);
@orangeFocus          : saturate(darken(@orange, 8), 20, relative);
@yellowFocus          : saturate(darken(@yellow, 8), 20, relative);
@oliveFocus           : saturate(darken(@olive, 8), 20, relative);
@greenFocus           : saturate(darken(@green, 8), 20, relative);
@tealFocus            : saturate(darken(@teal, 8), 20, relative);
@blueFocus            : saturate(darken(@blue, 8), 20, relative);
@violetFocus          : saturate(darken(@violet, 8), 20, relative);
@purpleFocus          : saturate(darken(@purple, 8), 20, relative);
@pinkFocus            : saturate(darken(@pink, 8), 20, relative);
@brownFocus           : saturate(darken(@brown, 8), 20, relative);

@lightRedFocus        : saturate(darken(@lightRed, 8), 20, relative);
@lightOrangeFocus     : saturate(darken(@lightOrange, 8), 20, relative);
@lightYellowFocus     : saturate(darken(@lightYellow, 8), 20, relative);
@lightOliveFocus      : saturate(darken(@lightOlive, 8), 20, relative);
@lightGreenFocus      : saturate(darken(@lightGreen, 8), 20, relative);
@lightTealFocus       : saturate(darken(@lightTeal, 8), 20, relative);
@lightBlueFocus       : saturate(darken(@lightBlue, 8), 20, relative);
@lightVioletFocus     : saturate(darken(@lightViolet, 8), 20, relative);
@lightPurpleFocus     : saturate(darken(@lightPurple, 8), 20, relative);
@lightPinkFocus       : saturate(darken(@lightPink, 8), 20, relative);
@lightBrownFocus      : saturate(darken(@lightBrown, 8), 20, relative);
@lightGreyFocus       : saturate(darken(@lightGrey, 8), 20, relative);
@lightBlackFocus      : saturate(darken(@fullBlack, 8), 20, relative);

/*---  Emotive  ---*/
@positiveColorFocus   : saturate(darken(@positiveColor, 8), 20, relative);
@negativeColorFocus   : saturate(darken(@negativeColor, 8), 20, relative);

/*---  Brand   ---*/
@facebookFocusColor   : saturate(darken(@facebookColor, 8), 20, relative);
@twitterFocusColor    : saturate(darken(@twitterColor, 8), 20, relative);
@googlePlusFocusColor : saturate(darken(@googlePlusColor, 8), 20, relative);
@linkedInFocusColor   : saturate(darken(@linkedInColor, 8), 20, relative);
@youtubeFocusColor    : saturate(darken(@youtubeColor, 8), 20, relative);
@instagramFocusColor  : saturate(darken(@instagramColor, 8), 20, relative);
@pinterestFocusColor  : saturate(darken(@pinterestColor, 8), 20, relative);
@vkFocusColor         : saturate(darken(@vkColor, 8), 20, relative);

/*---  Dark Tones  ---*/
@fullBlackFocus       : lighten(@fullBlack, 8);
@blackFocus           : lighten(@black, 8);
@greyFocus            : lighten(@grey, 8);

/*---  Light Tones  ---*/
@whiteFocus           : darken(@white, 8);
@offWhiteFocus        : darken(@offWhite, 8);
@darkWhiteFocus       : darken(@darkWhite, 8);


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

/*---  Colors  ---*/
@primaryColorDown    : darken(@primaryColor, 10);
@secondaryColorDown  : lighten(@secondaryColor, 10);

@redDown             : darken(@red, 10);
@orangeDown          : darken(@orange, 10);
@yellowDown          : darken(@yellow, 10);
@oliveDown           : darken(@olive, 10);
@greenDown           : darken(@green, 10);
@tealDown            : darken(@teal, 10);
@blueDown            : darken(@blue, 10);
@violetDown          : darken(@violet, 10);
@purpleDown          : darken(@purple, 10);
@pinkDown            : darken(@pink, 10);
@brownDown           : darken(@brown, 10);

@lightRedDown        : darken(@lightRed, 10);
@lightOrangeDown     : darken(@lightOrange, 10);
@lightYellowDown     : darken(@lightYellow, 10);
@lightOliveDown      : darken(@lightOlive, 10);
@lightGreenDown      : darken(@lightGreen, 10);
@lightTealDown       : darken(@lightTeal, 10);
@lightBlueDown       : darken(@lightBlue, 10);
@lightVioletDown     : darken(@lightViolet, 10);
@lightPurpleDown     : darken(@lightPurple, 10);
@lightPinkDown       : darken(@lightPink, 10);
@lightBrownDown      : darken(@lightBrown, 10);
@lightGreyDown       : darken(@lightGrey, 10);
@lightBlackDown      : darken(@fullBlack, 10);

/*---  Emotive  ---*/
@positiveColorDown   : darken(@positiveColor, 10);
@negativeColorDown   : darken(@negativeColor, 10);

/*---  Brand   ---*/
@facebookDownColor   : darken(@facebookColor, 10);
@twitterDownColor    : darken(@twitterColor, 10);
@googlePlusDownColor : darken(@googlePlusColor, 10);
@linkedInDownColor   : darken(@linkedInColor, 10);
@youtubeDownColor    : darken(@youtubeColor, 10);
@instagramDownColor  : darken(@instagramColor, 10);
@pinterestDownColor  : darken(@pinterestColor, 10);
@vkDownColor         : darken(@vkColor, 10);

/*---  Dark Tones  ---*/
@fullBlackDown       : lighten(@fullBlack, 10);
@blackDown           : lighten(@black, 10);
@greyDown            : lighten(@grey, 10);

/*---  Light Tones  ---*/
@whiteDown           : darken(@white, 10);
@offWhiteDown        : darken(@offWhite, 10);
@darkWhiteDown       : darken(@darkWhite, 10);


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

/*---  Colors  ---*/
@primaryColorActive    : saturate(darken(@primaryColor, 5), 15, relative);
@secondaryColorActive  : saturate(lighten(@secondaryColor, 5), 15, relative);

@redActive             : saturate(darken(@red, 5), 15, relative);
@orangeActive          : saturate(darken(@orange, 5), 15, relative);
@yellowActive          : saturate(darken(@yellow, 5), 15, relative);
@oliveActive           : saturate(darken(@olive, 5), 15, relative);
@greenActive           : saturate(darken(@green, 5), 15, relative);
@tealActive            : saturate(darken(@teal, 5), 15, relative);
@blueActive            : saturate(darken(@blue, 5), 15, relative);
@violetActive          : saturate(darken(@violet, 5), 15, relative);
@purpleActive          : saturate(darken(@purple, 5), 15, relative);
@pinkActive            : saturate(darken(@pink, 5), 15, relative);
@brownActive           : saturate(darken(@brown, 5), 15, relative);

@lightRedActive        : saturate(darken(@lightRed, 5), 15, relative);
@lightOrangeActive     : saturate(darken(@lightOrange, 5), 15, relative);
@lightYellowActive     : saturate(darken(@lightYellow, 5), 15, relative);
@lightOliveActive      : saturate(darken(@lightOlive, 5), 15, relative);
@lightGreenActive      : saturate(darken(@lightGreen, 5), 15, relative);
@lightTealActive       : saturate(darken(@lightTeal, 5), 15, relative);
@lightBlueActive       : saturate(darken(@lightBlue, 5), 15, relative);
@lightVioletActive     : saturate(darken(@lightViolet, 5), 15, relative);
@lightPurpleActive     : saturate(darken(@lightPurple, 5), 15, relative);
@lightPinkActive       : saturate(darken(@lightPink, 5), 15, relative);
@lightBrownActive      : saturate(darken(@lightBrown, 5), 15, relative);
@lightGreyActive       : saturate(darken(@lightGrey, 5), 15, relative);
@lightBlackActive      : saturate(darken(@fullBlack, 5), 15, relative);

/*---  Emotive  ---*/
@positiveColorActive   : saturate(darken(@positiveColor, 5), 15, relative);
@negativeColorActive   : saturate(darken(@negativeColor, 5), 15, relative);

/*---  Brand   ---*/
@facebookActiveColor   : saturate(darken(@facebookColor, 5), 15, relative);
@twitterActiveColor    : saturate(darken(@twitterColor, 5), 15, relative);
@googlePlusActiveColor : saturate(darken(@googlePlusColor, 5), 15, relative);
@linkedInActiveColor   : saturate(darken(@linkedInColor, 5), 15, relative);
@youtubeActiveColor    : saturate(darken(@youtubeColor, 5), 15, relative);
@instagramActiveColor  : saturate(darken(@instagramColor, 5), 15, relative);
@pinterestActiveColor  : saturate(darken(@pinterestColor, 5), 15, relative);
@vkActiveColor         : saturate(darken(@vkColor, 5), 15, relative);

/*---  Dark Tones  ---*/
@fullBlackActive       : darken(@fullBlack, 5);
@blackActive           : darken(@black, 5);
@greyActive            : darken(@grey, 5);

/*---  Light Tones  ---*/
@whiteActive           : darken(@white, 5);
@offWhiteActive        : darken(@offWhite, 5);
@darkWhiteActive       : darken(@darkWhite, 5);