// ==============================================================
//
// UTILITY MIXINS
//
// ==============================================================

// Unit Return Mixins - Borders
// @type: null = border
// If @val < 4 will return 0, or thin, medium or thick keywords
// ==============================================================

// TOP OFFSET
.topUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@convertToPxBelowThreshold = null), (isnumber(@convertToPxBelowThreshold)) and (@val >= @convertToPxBelowThreshold) {
  @top: unit(round((@val / @context),8), em);
}
.topUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (isnumber(@convertToPxBelowThreshold)) and (@val < @convertToPxBelowThreshold) {
  @top: ceil(unit(@val,px));
}
.topUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@val = 0) {
  @top: 0;
}


// RIGHT OFFSET
.rightUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@convertToPxBelowThreshold = null), (isnumber(@convertToPxBelowThreshold)) and (@val >= @convertToPxBelowThreshold)  {
  @right: unit(round((@val / @context),8), em);
}
.rightUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (isnumber(@convertToPxBelowThreshold)) and (@val < @convertToPxBelowThreshold) {
  @right: ceil(unit(@val,px));
}
.rightUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@val = 0) {
  @right: 0;
}


// BOTTOM OFFSET
.bottomUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
)  when (@convertToPxBelowThreshold = null), (isnumber(@convertToPxBelowThreshold)) and (@val >= @convertToPxBelowThreshold) {
  @bottom: unit(round((@val / @context),8), em);
}
.bottomUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (isnumber(@convertToPxBelowThreshold)) and (@val < @convertToPxBelowThreshold) {
  @bottom: ceil(unit(@val,px));
}
.bottomUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@val = 0) {
  @bottom: 0;
}


// LEFT OFFSET
.leftUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@convertToPxBelowThreshold = null), (isnumber(@convertToPxBelowThreshold)) and (@val >= @convertToPxBelowThreshold) {
  @left: unit(round((@val / @context),8), em);
}
.leftUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (isnumber(@convertToPxBelowThreshold)) and (@val < @convertToPxBelowThreshold) {
  @left: ceil(unit(@val,px));
}
.leftUnitReturn(
  @val,
  @context: @baseFontPx,
  @convertToPxBelowThreshold: null
) when (@val = 0) {
  @left: 0;
}


// ==========================================================================
// Global Mixins and Variables
// ==========================================================================
@staticAssetPath: "../";


// GRID AND SITE SETUP
// ==========================================================================

// Root Font Size
@baseFontPx: 17;
// root size for next compatibility
@nextRootPx: 16;
// Root pixel line-height target
@baseLeadingTargetPx: 24;
// Base LIne Height as unitless values
@defaultLineHeight: 1.45;
@headingLineHeight: 1.2;

// Base component spacing
// Part of CSE-2066
@baseSpacing: 12;
// Base horizontal spacing
@baseSpacingHorz: @baseSpacing;
// Base vertical spacing
@baseSpacingVert: @baseSpacing;

// Converts the above into a percentage; used to set font-size on HTML element
@rootFontSize:  ((@baseFontPx / 16) * 100 + 0%);

// Convert pixel line-height to Ems
@baselineEm: ((@baseLeadingTargetPx / @baseFontPx) + 0em);

// Sets max-width on site wrapper
@absMaxWidthPx: 1176;
@absMaxWidth: ((@absMaxWidthPx / @baseFontPx) + 0em);

// Base Heading margin
@headingMargin: 12;

// Uses rems when doing conversion. If false it uses pixels (for IE8)
@rem: true;

// Disable old-ie rules
// Based on this technique: http://www.iambacon.co.uk/blog/life-is-now-easier-create-media-query-mixins-with-rulesets-less-css
@fix-mqs: false;
@old-ie: false;

// Set units for Typography
//
// When set the `type()` mixin will return values in the chosen units
// Accepted values: rem, em, px
@typeUnit: em;

// Uses pixels and not rems when doing the conversion for values below this default
@convertToPxBelowThreshold: 4;

// MEDIA QUERY BREAKPOINT VARIABLES
// ==========================================================================

  // larger tablets
@mqMaxTablet: ((959 / 16) + 0em);
@mqMinTablet: ((726 / 16) + 0em);

// smaller tablets
@mqMaxSmallTablet: ((725 / 16) + 0em);

@mqMinDesktopPx: 960;
@mqMinDesktop: ((@mqMinDesktopPx / 16) + 0em);
@mqTablet601: ((601 / 16) + 0em);
@mqTablet600: ((600 / 16) + 0em);
@mqMinSmallTablet: ((492 / 16) + 0em);
@mqMaxMobile: ((491 / 16) + 0em);


// used to adjust content based on height of screen
@mqFold: ((540 / 16) + 0em);

// Global Color Variables
// ==========================================================================

// Expedia Color Variables

// grayscale colors
@grey100: #f5f5f5; // 96%
@grey200: #ededed; // 92%
@grey300: #e0e0e0; // 88%
@grey400: #c7c7c7; // 78%
@grey500: #999999; // 60%
@grey600: #757575; // 46%
@grey700: #616161; // 38%
@grey800: #404040; // 25%
@grey900: #1f1f1f; // 12%
@white: #ffffff;

// legacy grayscale mappings
@paleGrey: @grey100;
@lightGrey: @grey400;
@mediumGrey: @grey500;
@formPlaceholder: @grey600;
@textSecondary: @grey700;
@darkGrey: @grey700;
@tileHeaderGrey: @grey700;
@darkerGrey: @grey800;
@grey: @grey800;
@text: @grey900;
@charcoal: @grey900;
@wellGrey: #e5e5e5;

// link colors
@link: #0065b8;
@linkHover:#0087f5; //lighten(@brandBlue,37%);
@linkHoverBg: @areaHover;
@linkVisited: #6592b8; // removed from documentation CSE-1188
@linkFocus:#0087f5; //lighten(@brandBlue,37%);

// area colors
@areaDefault: @white;
@areaHover: #EDF7FF;
@areaVisited: #f0f8ff;
@areaActive:#c2e3ff;

@brandBlue: #00355f;
@infoSecondary: #536d83;
@brandYellow: #ffcb00; //actual brand color is: #eec218
@moduleBlue: #00335d;
@moduleGrey: @grey400;
@moduleBorder: @grey500;
@orange: #F06601;
@error: #CC0000;

// mapping to @infoSecondary for a11y contrast
@blueGrey: @infoSecondary; // this color is used in lieu of brandBlueSecondary where brands != expedia
@brandBlueSecondary: @blueGrey; // remove once @brandBlueSecondary is deprecated

@headline: #D4E9EE;

@alertDefault: @grey400;
@alertLight: @grey300;
@alertBold: @brandBlue;
@alertLink: @link;
@alertInfo: #3b4c5b;
@alertInfoBg: #cbdef2;
@alertSuccess: #2f7000;
@alertSuccessBg: #d2e6c8;
@alertSuccessLightBg: #edfae6;
@alertWarn: #7a5305;
@alertWarnBg: #f0dcb4;
@alertImportant: #F06601;
@alertError: #b80000;
@alertErrorBg: #fad4d4;
@urgency: #d60000;

//Social Sharing Color Variables
@shareFacebook:#3a5b98;
@shareGooglePlus: #dd4c38;
@shareTwitter: #2eabe1;
@sharePinterest: #cb2127;
@shareEmail: #b9b9b9;

//Air Asia to Go Color Variables
//==========================================================================
@aagoRed: #e11e25;
@aagoDarkGrey: #333;
@aagoMediumGrey: #696969;
@aagoPaleGrey: #eaeaea;
@aagoOrange: #f18700;
@aagoLightOrange: #fff3e3;

//Bank of America Set Color Variables
//==========================================================================
@bacRed: #A12830;
@bacLightRed: #DC1431;
@bacMedRed: #C41230;
@bacDarkRed:#780032;
@bacLightBlue: #0073CF;
@bacMedBlue: #0067B1;
@bacDarkBlue: #004990;
@bacDeepBlue: #001f44;
@bacLinkBlue: #3366CC;
@bacBtnBorder: #124E89;
@bacBtnBlueActive: #004990;
@bacBtnBlue: #005999;
@bacBtnWhite: @white;
@bacBtnBrown: #524940;
@bacText: #333;
@bacErrorBorder: @bacLightRed;
@bacErrorBackground: #FFF4F9;
@bacErrorColor: #D40014;
@bacWarnBorder: #EDEFE3;
@bacWarnBackground: #F8FAED;
@bacWarnColor: @bacText;
@bacSuccessBorder: #B6DCFC;
@bacSuccessBackground: #ECF6FD;
@bacSuccessColor: @bacText;
@bacInfoBorder: #B6DCFC;
@bacInfoBackground: #ECF6FD;
@bacInfoColor: @bacText;

  //OLDER Variables
@bacBlue: @bacLightBlue;
@bacLightGrey: #f3f3f3;
@bacDarkGrey: #D1C9C0;
@bacYellow: #FFCC00;
@bacDarkGreen: #164734;
@bacGreen: #00663F;
@bacBtnLightBlue: @bacBlue;
@bacBtnDarkBlue: #012169;
@bacBtnGray: #ECE6DD;
@bacBtnLight: #F9F7F4;
@bacCash: #00663F;

//Travelocity Color Variables
//==========================================================================
@tvlyGreen: #90C900;
@tvlyDarkGreen: #435C06;
@tvlyOrange: #f37737;
@tvlyDarkBlue: #004074;
@tvlyLinkBlue: #004e93;
@tvlyMidBlue: #53a0d3;
@tvlyYellow: @brandYellow;

//Hcom Color Variables
//==========================================================================
@hcomRed: #d41200;
@hcomDarkRed: #9c0c1e;
@hcomLinkBlue: #026dc5;
@hcomDarkBlue: #023370;
@hcomMediumBlue: #003789;
@hcomLightBlue: #95cffe;
@hcomBlack: #333333;
@hcomDarkGrey: #a5a5a5;
@hcomLightGrey: #dcdcdc;
@hcomPaleGrey: #e5e3db;
@hcomTabGrey: #cccccc;
@hcomIconGrey: #e8e8e8;
@hcomCoral: #e57166;

//HW Color Variables
//==========================================================================
@hotRed: #b90005;
@hotBlue: #00afef;
@hotPaleGrey: #f8f8f8;
@hotLightGrey: #e3e3e3;
@hotDarkGrey: #666666;
@hotDarkerGrey: #333333;
@hotGreen: #78b520;

//Wotif Color Variables
//==========================================================================
@wotifLightGreen: #7ac231;
@wotifGreen: #599027;
@wotifLightBlue: #1f8ede;
@wotifBlue: #1E6fa8;
@wotifPaleGrey: #f1f1f1;
@wotifLightGrey: #cccccc;
@wotifDarkGrey: @darkerGrey;
@wotifBtnUtility: #6b6b6b;
@wotifBtnActionText: #2e4a14;
@wotifBtnActionBg: #9be055;
@wotifBtnActionBorder: #78bb55;
@wotifBtnActionGrad: #90d44b;
@wotifBtnSubActionBorder: #2271aa;
@wotifBtnSubActionGrad: #1a7abf;

//Travel.com.au Color Variables
//==========================================================================
@tvlauBlue: #327cb2;
@tvlauYellow: #ff9b2f;
@tvlauDarkBlue: #084e7f;
@tvlauLink: #1268a5;
@tvlauPaleGrey: #f1f1f1;
@tvlauLightGrey: #cccccc;
@tvlauDarkGrey: @darkerGrey;
@tvlauBtnActionText: #000000;

//Last Minute Color Variables
//==========================================================================
@lmLightPink: #fdebf6;
@lmPink: #e40088;
@lmDarkPink: #a1266c;
@lmLightTeal: #ebf5f9;
@lmTeal: #0e6d8c;
@lmDarkTeal: #005b79;

//RBC Color Variables
//==========================================================================
//Commented out names match RBC Style Guild Names
//
@rbcBlue: #006aC3; // Blue Tint 1
@rbcHoverBlue: #0051a5; //RBC Blue
@rbcDarkBlue: #002750; //Dark Blue
@rbcYellow: #fedf01; //Yellow
@rbcBlackTint: #252525; // RBC Black Tint 1
@rbcDarkGray: #444444; // Dark Grey
@rbcSubGrey: #6f6f6f; // Grey tint 1
@rbcMinimumGrey: #b3b3b3; // Grey tint 2
@rbcLightGray: #eaeaea; //Grey light tint 3
@rbcBtnGray: #f3f4f5; //Grey light tint
@rbcLightBlue: #e1ebef; //Tundra Tint 2
@rbcPaleBlue: #f3f7f8; //Tundra Tint 3
@rbcPurple: #4F2D75;
@rbcWine: #8A204A;
@rbcRed: #FA533C; //RBC Warm Red 02
@rbcRed3: #FA6551; //RBC Warm Red 03
@rbcRed4: #FB7968; //RBC Warm Red 04
@rbcSun: #FCA311; // RBC Sun
@rbcSun3: #FDB541; // RBC Sun 03
@rbcGreen: #AABA0A; //RBC Apple
@rbcGreen2: #E4E422;
@rbcGreen3: #CDDB3D;
@rbcGreen4: #407A77;
@rbcAqua: #00AA9F;
@rbcTeal: #00AEB5; // RBC Teal
@rbcBlue3: #475EAB;
@rbcBlue4: #63BDE3; // RBC Sky
@rbcErrorRed: #b91a0e;
@rbcErrorRed2: @rbcRed4;
@rbcWarnYellow: #ffba00;
@rbcDarkYellow: @rbcSun3;
@rbcText: @rbcBlackTint;
@rbcHighlightYellow: @rbcYellow;
@rbcLightYellow: @rbcYellow;
@rbcGray: @rbcSubGrey;
@rbcLinkBlue: @rbcBlue;
@rbcSuccessGreen: #11812c;
@rbcBtnYellow: @rbcDarkYellow;
@rbcBtnLightYellow: #FFDB29;
@rbcBtnBorderYellow: #EBC400;
@rbcBtnLight: @white;
@rbcBtnWhite: @white;


//US Bank Color Variables
//==========================================================================
@usbankDarkBlue: #0c2074;
@usbankBlue: #0073CF;
@usbankLinkBlue: #0D56A3;
@usbankLightGrey: #F3F3F3;
@usbankDarkGrey: #AEADAD;
@usbankRed: #DE162B;
@usbankDarkGreen: #164734;
@usbankGreen: #00AD51;
@usbankBtnBlue: #0950A0;
@usbankBtnLightBlue: #2B85BB;
@usbankBtnDarkBlue: #012169;
@usbankBtnGrey: #BDBDBD;
@usbankBtnLightGrey: #C0C0C0;
@usbankBtnLight: #F2F2F2;
@usbankBtnWhite: @white;


//Orbitz Color Variables
//==========================================================================
@orbitzDarkBlue: #00253c;
@orbitzLightBlue: #00b1ff;
@orbitzLoyaltyPurple: #8e0099;
@orbitzBtnRed: #df3864;
@orbitzBtnBottomRed: #c4204b;
@orbitzBtnBorderRed: #b12747;
@orbitzMerchBlue: #004d7c;

//CheapTickets Color Variables
//==========================================================================
@ctPrimaryRed: #dd0000;
@ctSecondaryRed: #800400;
@ctBtnBorderRed: #990033;

//ebookers Color Variables
//==========================================================================
@ebookDarkBlue: #0D3880;
@ebookBrightBlue: #2FB4ED;
@ebookPink: #D40C55;
@ebookBtnTopPink: #EA0659;
@ebookBtnBorderPink: #96083C;
@ebookLoyaltyOrange: #FF960D;
// DO NOT USE THIS BLOCK OF VARIABLES. THEY WILL BE DELETED IN THE NEXT RELEASE
@ebookBtnBottomBlue: @ebookBtnTopPink;
@ebookBtnBorderBlue: @ebookBtnBorderPink;
@ebookLoyaltyOrangeText: @grey900;
// END DELETED VARIABLES

//MrJet
//==========================================================================
@mrJetPrimaryBlue: #26344f;
@mrJetSecondaryOrange: #ff7931;
@mrJetBtnBorderOrange: #c24f11;
@mrJetUrgencyYellow: @mrJetSecondaryOrange;
@mrJetLoyaltyGreen: #007868;

//Nike Color Variables
//==========================================================================
@nikeBlue: #0970AB;
@nikeSaphireBlue: #043571;
@nikeNavyBlue: #002849;
@nikeDarkBlue: #0D212F;
@nikeLightBlue: #DBEEF7;
@nikeGreen: #0D823C;
@nikeLightGreen: #1DB550;
@nikeRed: #BF1722;
@nikeMediumGrey: #CCCCCC;
@nikeDarkGrey: #777777;
@nikeTextGrey: #555555;
@nikeLightGrey: #F7F7F7;
@nikeLightGreyBlue: #EBEDF0;
@nikeText: #000000;
@nikeError2: #F4DADF;



// Relative Path Variables
// ==========================================================================
@images: '../../images';
@fonts: '../../fonts';

// Icon Variables
// ==========================================================================
@iconName: 'UITKIcons';

// Border Radius
// ==========================================================================
@defaultBorderRadius: 3;

// Icons Variables
// ==========================================================================
@iconName: 'UITKIcons';
@iconNameSocial: 'social-icomoon';


// Fonts and Sizes
// ==========================================================================
//
//  Font Size and Family Stacks:
//
//   Font Size:
//     #font > .size(20);
//
//     Outputs 20px converted to ems
//
//  Line Height:
//     #font > .line-height(20,1);
//
//     Outputs multiples of converted to ems
//
//  Font Stacks:
//     #font > .primary-stack
//
//     Outputs font-family: ...
//
#font() {
  .size(
    @target: @baseFontPx,
    @context: @baseFontPx
  ) {
    @emFontSize: (@target / @context);
    font-size: @emFontSize + 0em;
  }

  // font size mixins that also return correct unitless line-height
  // font-size > @h4 = 1.2
  .sizeIncludeLineheight(
    @target: @baseFontPx,
    @context: @baseFontPx,
    @lineHeight: ''
  ) when (@target > @h4) and (@lineHeight = ''){
    // calculation helper
    @emFontSize: (@target / @context);
    font-size: @emFontSize + 0em;
    line-height: @headingLineHeight;
  }
  // font-size < @h3 = 1.45
  .sizeIncludeLineheight(
    @target: @baseFontPx,
    @context: @baseFontPx,
    @lineHeight: ''
  ) when (@target < @h3) and (@lineHeight = ''){
    // calculation helper
    @emFontSize: (@target / @context);
    font-size: @emFontSize + 0em;
    line-height: @defaultLineHeight;
  }
  // when lineHeight is passed in
  .sizeIncludeLineheight(
    @target: @baseFontPx,
    @context: @baseFontPx,
    @lineHeight: ''
  ) when not ( @lineHeight = ''){
    @emFontSize: (@target / @context);
    font-size: @emFontSize + 0em;
    line-height: (@lineHeight / @target);
  }
  // Line height mixins
  .line-height(
    @target: @baseFontPx,
    @lineMultiple: 1
  ){
    @emFontSize: (@target / @baseFontPx);
    line-height: (@baseLeadingTargetPx / @baseFontPx) / @emFontSize * @lineMultiple + 0em;
  }
  // Unitless line-height font-size > @h4 = 1.2
  .lineHeightUnitless(
    @target: @baseFontPx,
    @lineMultiple: 1
  ) when (@target > @h4) {
    @emFontSize: (@target / @baseFontPx);
    line-height: (@headingLineHeight * @lineMultiple);
  }
  // font-size < @h3 = 1.45
  .lineHeightUnitless(
    @target: @baseFontPx,
    @lineMultiple: 1
  ) when (@target < @h3) {
    @emFontSize: (@target / @baseFontPx);
    line-height: (@defaultLineHeight * @lineMultiple);
  }

  // Font stacks
  .primary-stack() {
    font-family: "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
  }
}


// Predefined Type Sizes
// ==========================================================================
@type900: 45;
@type800: 34;
@type700: 27;
@type600: 23;
@type500: 20;
@type400: @baseFontPx;
@type300: 15;
@type200: 13;
@type100: 11;

@type900LineHeight: 51;
@type800LineHeight: 39;
@type700LineHeight: 33;
@type600LineHeight: 30;
@type500LineHeight: 27;
@type400LineHeight: 24;
@type300LineHeight: 21;
@type200LineHeight: 18;
@type100LineHeight: 15;

//
// Predefined Font Sizes
// ==========================================================================
@h1Display: @type900;
@h1: @type700;
@h2: @type600;
@h3: @type500;
@h4: @baseFontPx;
@h5: @type300;
@h6: @type200;
// Body Copy
@copy: @baseFontPx;
@copySmall: @type200;


// Font weight
@fontWeight100: 100;
@fontWeight200: 200;
@fontWeight300: 300;
@fontWeight400: 400;
@fontWeight500: 500;
@fontWeight600: 600;
@fontWeight700: 700;
@fontWeight800: 800;
@fontWeight900: 900;

// Font Size Element Shortcuts
// ==========================================================================

// H tag helpers
.H(
  1,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h1,@context,@type700LineHeight);
}
.H(
  d,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h1Display,@context,@type900LineHeight);
}
.H(
  2,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h2,@context,@type600LineHeight);
}
.H(
  3,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h3,@context,@type500LineHeight);
}
.H(
  4,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h4,@context,@type400LineHeight);
}
.H(
  5,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h5,@context,@type300LineHeight);
}
.H(
  6,
  @context: @baseFontPx
) {
  #font > .sizeIncludeLineheight(@h6,@context,@type200LineHeight);
  font-weight: bold;
}

// Grid Mixins and Variables
// ==========================================================================
#grid() {
  // Full-width rows: #grid > .column(NumberOfColumnsToSpan);
  .column(
    @count: 1,
    @cols: 12
  ) {
    width: (100 / @cols) * @count + 0%;
  }

  // Inset/Outset Columns
  .push(
    @count: 1,
    @cols: 12
  ){
    margin-left: (100 / @cols) * @count + 0%;
  }
  .pull(
    @count: 1,
    @cols: 12
  ){
    margin-left: -(100 / @cols) * @count + 0%;
  }
}

// Grid Columns Predefined
.cols1(@cols:12) {#grid > .column(1,@cols)}
.cols2(@cols:12) {#grid > .column(2,@cols)}
.cols3(@cols:12) {#grid > .column(3,@cols)}
.cols4(@cols:12) {#grid > .column(4,@cols)}
.cols5(@cols:12) {#grid > .column(5,@cols)}
.cols6(@cols:12) {#grid > .column(6,@cols)}
.cols7(@cols:12) {#grid > .column(7,@cols)}
.cols8(@cols:12) {#grid > .column(8,@cols)}
.cols9(@cols:12) {#grid > .column(9,@cols)}
.cols10(@cols:12) {#grid > .column(10,@cols)}
.cols11(@cols:12) {#grid > .column(11,@cols)}
.cols12(@cols:12) {#grid > .column(12,@cols)}

// Guarded
.cols1(@count:1,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols2(@count:2,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols3(@count:3,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols4(@count:4,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols5(@count:5,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols6(@count:6,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols7(@count:7,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols8(@count:8,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols9(@count:9,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols10(@count:10,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols11(@count:11,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}
.cols12(@count:12,@cols:12) when (@count) and (@cols) {#grid > .column(@count,@cols)}

// Push Cols
.in1(@cols:12) {#grid > .push(1,@cols)}
.in2(@cols:12) {#grid > .push(2,@cols)}
.in3(@cols:12) {#grid > .push(3,@cols)}
.in4(@cols:12) {#grid > .push(4,@cols)}
.in5(@cols:12) {#grid > .push(5,@cols)}
.in6(@cols:12) {#grid > .push(6,@cols)}
.in7(@cols:12) {#grid > .push(7,@cols)}
.in8(@cols:12) {#grid > .push(8,@cols)}
.in9(@cols:12) {#grid > .push(9,@cols)}
.in10(@cols:12) {#grid > .push(10,@cols)}
.in11(@cols:12) {#grid > .push(11,@cols)}

// Pull Cols
.out1(@cols:12) {#grid > .pull(1,@cols)}
.out2(@cols:12) {#grid > .pull(2,@cols)}
.out3(@cols:12) {#grid > .pull(3,@cols)}
.out4(@cols:12) {#grid > .pull(4,@cols)}
.out5(@cols:12) {#grid > .pull(5,@cols)}
.out6(@cols:12) {#grid > .pull(6,@cols)}
.out7(@cols:12) {#grid > .pull(7,@cols)}
.out8(@cols:12) {#grid > .pull(8,@cols)}
.out9(@cols:12) {#grid > .pull(9,@cols)}
.out10(@cols:12) {#grid > .pull(10,@cols)}
.out11(@cols:12) {#grid > .pull(11,@cols)}


// Height Mixins
// ==========================================================================

// === Height ===
.height(
  @target: @baseFontPx,
  @h
) {
  .topUnitReturn(@h,@target);
  height: @top;
}

// Width ===
.width(
  @target: @baseFontPx,
  @w
) {
  .leftUnitReturn(@w,@target);
  width: @left;
}

// === Max Width ===
.max-height(
  @target: @baseFontPx,
  @h
) {
  .topUnitReturn(@h, @target);
  max-height: @top;
}

// === Max Width ===
.max-width(
  @target: @baseFontPx,
  @w
) {
  .leftUnitReturn(@w,@target);
  max-width: @left;
}

// === Min Width ===
.min-height(
  @target: @baseFontPx,
  @h
) {
  .topUnitReturn(@h,@target);
  min-height: @top;
}

// === Min Width ===
.min-width(
  @target: @baseFontPx,
  @w
) {
  .leftUnitReturn(@w,@target);
  min-width: @left;
}

// === ELEMENT POSITION ===
// Use when you need to set specific position lengths in ems. DO NOT USE FOR % values.
// For percentage and zero values, use plain CSS, not this mixin
//
// USAGE:
// .pos(%SIDE%,@target,@t[,@r,@b,@l])
//
// @params
// %SIDE% [required]: Used to identify which side to apply trbl (top, right, bottom and left),
// @target [required]: font-size of element for em conversion. Default: @baseFontPx
// @t, @r, @b, @l [required based on number of sides you're setting]: Length in pixels used for Top, Right, Bottom, and Left position. Will be converted to ems

// === All Four Sides ===
.pos(
  trbl,
  @target: @baseFontPx,
  @t,
  @r,
  @b,
  @l
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  .bottomUnitReturn(@b,@target);
  .leftUnitReturn(@l,@target);
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

// === Top ===
.pos(
  t,
  @target: @baseFontPx,
  @t
) {
  .topUnitReturn(@t,@target);
  top: @top;
}

// === Right ===
.pos(
  r,
  @target: @baseFontPx,
  @r
) {
  .rightUnitReturn(@r,@target);
  right: @right;
}

// === Bottom ===
.pos(
  b,
  @target: @baseFontPx,
  @b
) {
  .bottomUnitReturn(@b,@target);
  bottom: @bottom;
}

// === Left ===
.pos(
  l,
  @target: @baseFontPx,
  @l
) {
  .leftUnitReturn(@l,@target);
  left: @left;
}

// === Top-Right ===
.pos(
  tr,
  @target: @baseFontPx,
  @t,
  @r
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  top: @top;
  right: @right;
}


// === Top-Left ===
.pos(
  tl,
  @target: @baseFontPx,
  @t,
  @l
) {
  .topUnitReturn(@t,@target);
  .leftUnitReturn(@l,@target);
  top: @top;
  left: @left;
}

// === MARGINS ===
// %SIDE% : [required] which side(s) to apply margin. values are: a (shorthand single value), trbl (top-right-bottom-left)
//    tr (top-right), trb (top-right-bottom), t (top), r (right), b (bottom), l (left)
// @target: font-size of element for em conversion context. Default: @baseFontPx
// @t: sets top margin amount in pixels (exclude "px")
// @r: sets right margin amount
// @b: sets bottom margin
// @l: sets left margin


// Top + Right
// Only Single Margin Supplied
.margin(
  a,
  @target: @baseFontPx,
  @t
) {
  .topUnitReturn(@t,@target);
  margin: @top;
}
// Top Right
.margin(
  tr,
  @target: @baseFontPx,
  @t,
  @r
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  margin: @top @right;
}
// Top Right Bottom
.margin(
  trb,
  @target: @baseFontPx,
  @t,
  @r,
  @b
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  .bottomUnitReturn(@b,@target);
  margin: @top @right @bottom;
}
// All Four - single property supplied
.margin(
  trbl,
  @target: @baseFontPx,
  @t,
  @r,
  @b,
  @l
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  .bottomUnitReturn(@b,@target);
  .leftUnitReturn(@l,@target);
  margin: @top @right @bottom @left;
}
// Top
.margin(
  t,
  @target: @baseFontPx,
  @t
) {
  .topUnitReturn(@t,@target);
  margin-top: @top;
}
// Right
.margin(
  r,
  @target: @baseFontPx,
  @r
) {
  .rightUnitReturn(@r,@target);
  margin-right: @right;
}
// Bottom
.margin(
  b,
  @target: @baseFontPx,
  @b
) {
  .bottomUnitReturn(@b,@target);
  margin-bottom: @bottom;
}
// Left
.margin(
  l,
  @target: @baseFontPx,
  @l
) {
  .leftUnitReturn(@l,@target);
  margin-left: @left;
}



// === PADDING ===
// Same as margin, only with padding :)

// Only Single Padding Supplied
.padding(
  a,
  @target: @baseFontPx,
  @t
) {
  .topUnitReturn(@t,@target);
  padding: @top;
}
// Top Right, sets shorthand for top + right
.padding(
  tr,
  @target: @baseFontPx,
  @t,
  @r
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  padding: @top @right;
}
// Top Right Bottom, sets shorthand for top + right
.padding(
  trb,
  @target: @baseFontPx,
  @t,
  @r,
  @b
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  .bottomUnitReturn(@b,@target);
  padding: @top @right @bottom;
}
// Top Right Bottom Left
.padding(
  trbl,
  @target: @baseFontPx,
  @t,
  @r,
  @b,
  @l
) {
  .topUnitReturn(@t,@target);
  .rightUnitReturn(@r,@target);
  .bottomUnitReturn(@b,@target);
  .leftUnitReturn(@l,@target);
  padding: @top @right @bottom @left;
}
// Top Bottom
.padding(
  tb,
  @target: @baseFontPx,
  @v
) {
  .topUnitReturn(@v,@target);
  .bottomUnitReturn(@v,@target);
  padding-top: @top;
  padding-bottom: @bottom;
}
// Right Left
.padding(
  rl,
  @target: @baseFontPx,
  @v
) {
  .rightUnitReturn(@v,@target);
  .leftUnitReturn(@v,@target);
  padding-right: @right;
  padding-left: @left;
}
// Top
.padding(
  t,
  @target: @baseFontPx,
  @t
) {
  .topUnitReturn(@t,@target);
  padding-top: @top;
}
// Right
.padding(
  r,
  @target: @baseFontPx,
  @r
) {
  .rightUnitReturn(@r,@target);
  padding-right: @right;
}
// Bottom
.padding(
  b,
  @target: @baseFontPx,
  @b
) {
  .bottomUnitReturn(@b,@target);
  padding-bottom: @bottom;
}
// Left
.padding(
  l,
  @target: @baseFontPx,
  @l
) {
  .leftUnitReturn(@l,@target);
  padding-left: @left;
}

// =======================================================================================================
// BORDERS
// Make sure to supply the element's font-size, or @baseFontPx. This will ensure you get proper conversion
// =======================================================================================================


// Shorthand
// ==============================================================
.border(
  a,
  @target: @baseFontPx,
  @t:1,
  @color: transparent,
  @type: solid
) {
  .topUnitReturn(@t,@target,4);
  border: @top @type @color;
}
// Top Right
// ==============================================================

// Both borders are > 3
.border(
  tr,
  @target: @baseFontPx,
  @t:1,
  @r:1,
  @color: transparent,
  @type: solid
) {
  .topUnitReturn(@t,@target,4);
  .rightUnitReturn(@r,@target,4);
  border: @top @type @color;
  border-width: @top @right;
}

//Top Right Bottom
.border(
  trb,
  @target: @baseFontPx,
  @t:1,
  @r,
  @b,
  @color: transparent,
  @type: solid
) {
  .topUnitReturn(@t,@target,4);
  .rightUnitReturn(@r,@target,4);
  .bottomUnitReturn(@b,@target,4);

  border: @top @type @color;
  border-width: @top @right @bottom;
}

//Top Right Bottom Left
.border(
  trbl,
  @target: @baseFontPx,
  @t,
  @r,
  @b,
  @l,
  @color: transparent,
  @type: solid
){
  .topUnitReturn(@t,@target,4);
  .rightUnitReturn(@r,@target,4);
  .bottomUnitReturn(@b,@target,4);
  .leftUnitReturn(@l,@target,4);

  border: @top @type @color;
  border-width: @top @right @bottom @left;
}

//Top
.border(
  t,
  @target: @baseFontPx,
  @t,
  @color: transparent,
  @type: solid
) {
  .topUnitReturn(@t,@target,4);
  border-top: @top @type @color;
}

//Right
.border(
  r,
  @target: @baseFontPx,
  @r,
  @color: transparent,
  @type: solid
) {
  .rightUnitReturn(@r,@target,4);
  border-right: @right @type @color;
}

//Bottom
.border(
  b,
  @target: @baseFontPx,
  @b,
  @color: transparent,
  @type: solid
) {
  .bottomUnitReturn(@b,@target,4);
  border-bottom: @bottom @type @color;
}

//Left
.border(
  l,
  @target: @baseFontPx,
  @l,
  @color: transparent,
  @type: solid
) {
  .leftUnitReturn(@l,@target,4);
  border-left: @left @type @color;
}

// Border Widths
// ==========================================================================

//All; Shorthand
.border-width(
  a,
  @target: @baseFontPx,
  @t:1
) {
  .topUnitReturn(@t,@target,4);
  border-width: @top;
}

//Top
.border-width(
  t,
  @target: @baseFontPx,
  @t:1
) {
  .topUnitReturn(@t,@target,4);
  border-width: @top;
}

//Right
.border-width(
  r,
  @target: @baseFontPx,
  @r
) {
  .rightUnitReturn(@r,@target,4);
  border-right-width: @right;
}

//Bottom
.border-width(
  b,
  @target: @baseFontPx,
  @b
) {
  .bottomUnitReturn(@b,@target,4);
  border-bottom-width: @bottom;
}

// Left
.border-width(
  l,
  @target: @baseFontPx,
  @l
) {
  .leftUnitReturn(@l,@target,4);
  border-left-width: @left;
}

//Top Right Shorthand
.border-width(
  tr,
  @target: @baseFontPx,
  @t,
  @r
) {
  .topUnitReturn(@t,@target,4);
  .rightUnitReturn(@r,@target,4);
  border-width: @top @right;
}

//Top-Right Bottom
.border-width(
  trb,
  @target: @baseFontPx,
  @t,
  @r,
  @b
) {
  .topUnitReturn(@t,@target,4);
  .rightUnitReturn(@r,@target,4);
  .bottomUnitReturn(@b,@target,4);
  border-width: @top @right @bottom;
}

//Top-Right Bottom-Left
.border-width(
  trbl,
  @target: @baseFontPx,
  @t,
  @r,
  @b,
  @l
) {
  .topUnitReturn(@t,@target,4);
  .rightUnitReturn(@r,@target,4);
  .bottomUnitReturn(@b,@target,4);
  .leftUnitReturn(@l,@target,4);
  border-width: @top @right @bottom @left;
}

// ==========================================================================
// CSS3 Mix-ins
// ==========================================================================

// Form Fields
// ==========================================================================

// Reset appearance: -webkit only (removed from CSS4 spec)
.appearance(@type: none) {
  -webkit-appearance: @type;
  -moz-appearance: @type;
  -o-appearance: @type;
  appearance: @type;
}

// LAYOUT
// ==========================================================================

.col(
  @target: @baseFontPx
) {
  position: relative;
  float: left;
  .padding(l, @target, @baseSpacingHorz);
}

.cols-nested(
  @target: @baseFontPx
) {
  position: relative;
  .margin(tr,@target,0,-@baseSpacingHorz);
  .padding(trbl,@target,0,@baseSpacingHorz,0,0);
  clear: both;
  .cf;
}

//Multi-Columns
.columns(
  @count: 2,
  @length: auto
) {
  -webkit-columns: @count @length;
  -moz-columns: @count @length;
  -o-columns: @count @length;
  columns: @count @length;
}
.column-rule(
  @width: 1,
  @style: solid,
  @color: @moduleGrey
) {
  -webkit-column-rule: @width @style @color;
  -moz-column-rule: @width @style @color;
  -o-column-rule: @width @style @color;
  column-rule: @width @style @color;
}
.column-gap(
  @target: @baseFontPx,
  @w
) {
  .leftUnitReturn(@w,@target);
  -webkit-column-gap: @left;
  -moz-column-gap: @left;
  -o-column-gap: @left;
  column-gap: @left;
}

.column-span(
  @span: all
) {
  -webkit-column-span: @span;
  -moz-column-span: @span;
  -o-column-span: @span;
  column-span: @span;
}
.column-break-inside(
  @break:avoid
) {
  -webkit-column-break-inside: @break;
  page-break-inside: @break;
  -o-column-break-inside: @break;
  break-inside: @break;
}

// Box Model Adjustment
.box-sizing(
  @type: border-box
){
  -webkit-box-sizing: @type;
  -moz-box-sizing: @type;
  -ms-box-sizing: @type;
  box-sizing: @type;

}

// apply to container
.flexbox(){
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex-direction(@direction) {
  -webkit-flex-direction:@direction;
  -ms-flex-direction:@direction;
  flex-direction:@direction;
}
.flex-wrap(@wrap) {
  -ms-flex-wrap:@wrap;
  -webkit-flex-wrap:@wrap;
  flex-wrap:@wrap;
}
.flex-justify(@justifyStyle) {
  -ms-flex-pack:@justifyStyle;
  -webkit-justify-content: @justifyStyle;
  justify-content: @justifyStyle;
}
.flex-align-items(@alignStyle) {
  -ms-flex-align:@alignStyle;
  -webkit-align-items:@alignStyle;
  align-items: @alignStyle;
}

// apply to children
.flex-order(@order:1){
  -webkit-box-ordinal-group: @order;
  -moz-box-ordinal-group: @order;
  -ms-flex-order: @order;
  -webkit-order: @order;
  order: @order;
}
.flex(
  @grow: 1,
  @shrink:1,
  @basis:auto)
{
  -webkit-box-flex: @grow;
  -moz-box-flex: @grow;
  -webkit-flex: @grow @shrink @basis;
  -ms-flex: @grow @shrink @basis;
  flex: @grow @shrink @basis;
}

.flex-align-self(@selfAlignStyle) {
  .ms-flex-align-self(@selfAlignStyle);
  -webkit-align-self: @selfAlignStyle;
  align-self: @selfAlignStyle;
}

.ms-flex-align-self(@alignSelf) when (@alignSelf = flex-start) {
  -ms-flex-item-align: start;
}

.ms-flex-align-self(@alignSelf) when (@alignSelf = flex-end) {
  -ms-flex-item-align: end;
}

.ms-flex-align-self(@alignSelf) when (@alignSelf = auto), (@alignSelf = center), (@alignSelf = baseline), (@alignSelf = stretch) {
  -ms-flex-item-align: @alignSelf;
}

// Animation
// ==========================================================================

.transition(@arguments){
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -o-transition: @arguments;
  transition:  @arguments;
}

.animation(@arguments) {
  -webkit-animation: @arguments;
  -o-animation: @arguments;
  -moz-animation: @arguments;
  -ms-animation: @arguments;
  animation: @arguments;
}

// Transformations
// ==========================================================================
.transform(@string){
  -webkit-transform: @string;
  -moz-transform: @string;
  -ms-transform: @string;
  -o-transform: @string;
  transform: @string;
}
// scale
.scale (@factorX:0,@factorY:0) when (@factorY > 0) {
  -webkit-transform: scale(@factorX, @factorY);
  -moz-transform: scale(@factorX, @factorY);
  -ms-transform: scale(@factorX, @factorY);
  -o-transform: scale(@factorX, @factorY);
  transform: scale(@factorX, @factorY);
}

.scale (@factorX:0) {
  -webkit-transform: scale(@factorX);
  -moz-transform: scale(@factorX);
  -ms-transform: scale(@factorX);
  -o-transform: scale(@factorX);
  transform: scale(@factorX);
}
// end
.rotate (@deg) {
  -webkit-transform: rotate(@deg);
  -moz-transform: rotate(@deg);
  -ms-transform: rotate(@deg);
  -o-transform: rotate(@deg);
  transform: rotate(@deg);
}
.rotateZ (@deg) {
  -webkit-transform: rotatez(@deg);
  -moz-transform: rotatez(@deg);
  -ms-transform: rotatez(@deg);
  -o-transform: rotatez(@deg);
  transform: rotatez(@deg);
}
.skew (@deg, @deg2) {
  -webkit-transform: skew(@deg, @deg2);
  -moz-transform: skew(@deg, @deg2);
  -ms-transform: skew(@deg, @deg2);
  -o-transform: skew(@deg, @deg2);
  transform: skew(@deg, @deg2);
}
.translate (@x, @y:0) {
  -webkit-transform: translate(@x, @y);
  -moz-transform: translate(@x, @y);
  -ms-transform: translate(@x, @y);
  -o-transform: translate(@x, @y);
  transform: translate(@x, @y);
}
.translate3d (@x: 0, @y: 0, @z: 0) {
  -webkit-transform: translate3d(@x, @y, @z);
  -moz-transform: translate3d(@x, @y, @z);
  -ms-transform: translate3d(@x, @y, @z);
  -o-transform: translate3d(@x, @y, @z);
  transform: transform3d(@x, @y, @z);
}
.perspective (@value: 1000) {
  -webkit-perspective: @value;
  -moz-perspective: @value;
  -ms-perspective: @value;
  perspective: @value;
}
.transform-origin (@x:center, @y:center) {
  -webkit-transform-origin: @x @y;
  -moz-transform-origin: @x @y;
  -ms-transform-origin: @x @y;
  -o-transform-origin: @x @y;
  transform-origin: @x @y;
}


// Visual Styling
// ==========================================================================

.opacity(@opacity: .5) {
  opacity: @opacity;

  @ie-opacity: (@opacity * 100);
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ie-opacity})";
  filter: ~"alpha(opacity = @{ie-opacity})";
}

//opacity but not for IE < 9
.opacity-no-ie(@opacity: .5) {
  opacity: @opacity;
}

.box-shadow(
  @arguments
){
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}


// @i = inset (optional)
// @h = horizontal offset
// @v = vertical offset
// @b = blur radius
// @s = spread raduis
// @c = color
.box-shadow-em(
  @target: @baseFontPx,
  @h,
  @v,
  @b,
  @s,
  @c,
  @i: ~''
  ){
  .topUnitReturn(@v,@target);
  .rightUnitReturn(@h,@target);
  .bottomUnitReturn(@b,@target);
  .leftUnitReturn(@s,@target);
  // Reassign @var names so it makes more sense...
  @vOffset: @top;
  @hOffset: @right;
  @blur: @bottom;
  @spread: @left;
    -moz-box-shadow:@i @hOffset @vOffset @blur @spread @c;
    -webkit-box-shadow:@i @hOffset @vOffset @blur @spread @c;
    box-shadow:@i @hOffset @vOffset @blur @spread @c;
  }


.background-size-em(
  w,
  @target: @baseFontPx,
  @w
) {
  background-size: (@w / @target) + 0em;
}

.text-shadow(
  @arguments
) {
  text-shadow: @arguments;
}

.word-break(){
  word-break: break-all;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

// text indent
.text-indent(
  @target: @baseFontPx,
  @i
) {
  .leftUnitReturn(@i,@target);
  text-indent: @left;
}

// TODO document these mixins
// Text overflow
// @param type: ellipses[clip|visible|custom]
// @param string: custom string to use in place of ellipsis
.text-overflow(
  @type: ellipsis
) when not (@type = custom){
  // for Opera
  -o-text-overflow: @type;
  // end Opera
  text-overflow: @type;
}

.text-overflow (
  @type: custom,
  @string: ''
) when (@type = custom) {
  // for Opera
  -o-text-overflow: @string;
  // end Opera
  text-overflow: @string;
}

// Text Truncate mixin
// @param overflow: sets the overflow for the container,
// The .truncate class is defined in utilities.less, and uses this mixin.
#truncate() {
  overflow: hidden;
  white-space: nowrap;
  .text-overflow(ellipsis);
}

// Visually hidden mixin
// Designed to hide content visually whilst ensuring it
// is still available to assistive technologies
// @src: https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
.visuallyhidden(){
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

// Backgrounds
// ==========================================================================

// Background Position - Percentage
.background-position(
  cent,
  @x: 0,
  @y: 0
) {
  background-position: @x @y;
}

// Background Position - ems
.background-position(
  em,
  @target: @baseFontPx,
  @x: 0,
  @y: 0
) {
  .leftUnitReturn(@x,@target);
  .topUnitReturn(@y,@target);
  background-position: @left @top;
}

// Background-Clip
.background-clip(
  @type
) {
  -webkit-background-clip: @type;
  -moz-background-clip: @type;
  -o-background-clip: @type;
  background-clip: @type;
}

// Background Size
.background-size(
  @size: contain
) {
  -webkit-background-size: @arguments;
  -moz-background-size: @arguments;
  -ms-background-size: @arguments;
  -o-background-size: @arguments;
  -ms-background-size: @arguments;
  background-size: @arguments;

}

.background-size-em(
  w,
  @target: @baseFontPx,
  @w)
{
  .leftUnitReturn(@w,@target);
  background-size: @left;
}

.background-size-em(
  wh,
  @target: @baseFontPx,
  @w,
  @h)
{
  .leftUnitReturn(@w,@target);
  .topUnitReturn(@h,@target);
  background-size: @left @top;
}

// Background
.background(
  @target: @baseFontPx,
  @url,
  @l,
  @t,
  @repeat:no-repeat,
  @color:transparent
) {
  background: @color url(@url) ((@l / @target) + 0em) ((@t / @target) + 0em) @repeat;
}

// Background RGBA
.background-rgba(
  @color: #000,
  @alpha: 50%
) {
  background-color: @color;
  background-color: fade(@color,@alpha);
}

// Linear Gradients
.linear-gradient(tb, @start: #EEE, @stop: #FFF) {
  background: @start;
  background: -webkit-gradient(linear,
  left top,
  left bottom,
  color-stop(0%, @start),
  color-stop(100%, @stop));
  background: -webkit-linear-gradient(to bottom, @start 0%, @stop 100%);
  background: -moz-linear-gradient(to bottom, @start 0%, @stop 100%);
  background: -ms-linear-gradient(to bottom, @start 0%, @stop 100%);
  background: linear-gradient(to bottom, @start 0%, @stop 100%);
}
.linear-gradient(bt, @start: #EEE, @stop: #FFF) {
  background: @start;
  background: -webkit-gradient(linear,
  left bottom,
  left top,
  color-stop(0%, @start),
  color-stop(100%, @stop));
  background: -webkit-linear-gradient(to top, @start 0%, @stop 100%);
  background: -moz-linear-gradient(to top, @start 0%, @stop 100%);
  background: -ms-linear-gradient(to top, @start 0%, @stop 100%);
  background: linear-gradient(to top, @start 0%, @stop 100%);
}

.linear-gradient(lr, @start: #EEE, @stop: #FFF) {
  background: @start;
  background: -webkit-gradient(linear,
  left top,
  right top,
  color-stop(0%, @start),
  color-stop(100%, @stop));
  background: -webkit-linear-gradient(to right, @start 0%, @stop 100%);
  background: -moz-linear-gradient(to right, @start 0%, @stop 100%);
  background: -ms-linear-gradient(to right, @start 0%, @stop 100%);
  background: linear-gradient(to right, @start 0%, @stop 100%);
}

.linear-gradient(tlbr, @start: #EEE, @stop: #FFF) {
  background: @start;
  background: -webkit-gradient(linear,
  left top,
  right bottom,
  color-stop(0%, @start),
  color-stop(100%, @stop));
  background: -webkit-linear-gradient(-45deg, @start 0%, @stop 100%);
  background: -moz-linear-gradient(-45deg, @start 0%, @stop 100%);
  background: -ms-linear-gradient(-45deg, @start 0%, @stop 100%);
  background: linear-gradient(-45deg, @start 0%, @stop 100%);
}

.linear-gradient(trbl, @start: #EEE, @stop: #FFF) {
  background: @start;
  background: -webkit-gradient(linear,
  right top,
  left bottom,
  color-stop(0%, @start),
  color-stop(100%, @stop));
  background: -webkit-linear-gradient(45deg, @start 0%, @stop 100%);
  background: -moz-linear-gradient(45deg, @start 0%, @stop 100%);
  background: -ms-linear-gradient(45deg, @start 0%, @stop 100%);
  background: linear-gradient(45deg, @start 0%, @stop 100%);
}



// Borders
// ==========================================================================

// Border Radius
// none
.border-radius(
  none
) {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  border-radius: 0;
}

// Percentage
.border-radius(
  cent,
  @t
) {
  -webkit-border-radius: @t;
  -moz-border-radius: @t;
  -o-border-radius: @t;
  border-radius: @t;
}

// Single Radius
.border-radius(
  a,
  @context: @baseFontPx,
  @t
) {
  .topUnitReturn(@t,@context);
  -webkit-border-radius: @top;
  -moz-border-radius: @top;
  -o-border-radius: @top;
  border-radius: @top;
}

// Top-Left + Top-Right Radius
.border-radius(
  tlr,
  @context: @baseFontPx,
  @tl: null,
  @tr: null
) {
  .rightUnitReturn(@tr,@context);
  .leftUnitReturn(@tl,@context);
  -webkit-border-radius: @left @right 0 0;
  -moz-border-radius: @left @right 0 0;
  -o-border-radius: @left @right 0 0;
  border-radius: @left @right 0 0;
}

// Top-Left
.border-radius(
  tl,
  @context: @baseFontPx,
  @tl: null
) {
  .leftUnitReturn(@tl,@context);
  -webkit-border-radius: @left 0 0 0;
  -moz-border-radius: @left 0 0 0;
  -o-border-radius: @left 0 0 0;
  border-radius: @left 0 0 0;
}

// Top-Right
.border-radius(
  tr,
  @context: @baseFontPx,
  @tr: null
) {
  .rightUnitReturn(@tr,@context);
  -webkit-border-radius: 0 @right 0 0;
  -moz-border-radius: 0 @right 0 0;
  -o-border-radius: 0 @right 0 0;
  border-radius: 0 @right 0 0;
}

// Bottom-Left + Bottom-Right Radius
.border-radius(
  blr,
  @context: @baseFontPx,
  @br,
  @bl
) {
  .rightUnitReturn(@br,@context);
  .leftUnitReturn(@bl,@context);
  -webkit-border-radius: 0 0 @right @left;
  -moz-border-radius: 0 0 @right @left;
  -o-border-radius: 0 0 @right @left;
  border-radius: 0 0 @right @left;
}

// Bottom-Left
.border-radius(
  bl,
  @context: @baseFontPx,
  @bl: null
) {
  .leftUnitReturn(@bl,@context);
  -webkit-border-radius: 0 0 0 @left;
  -moz-border-radius: 0 0 0 @left;
  -o-border-radius: 0 0 0 @left;
  border-radius: 0 0 0 @left;
}

// Bottom-Right
.border-radius(
  br,
  @context: @baseFontPx,
  @br: null
) {
  .rightUnitReturn(@br,@context);
  -webkit-border-radius: 0 0 @right 0;
  -moz-border-radius: 0 0 @right 0;
  -o-border-radius: 0 0 @right 0;
  border-radius: 0 0 @right 0;
}

// Top-Left + Bottom-Left Radius
.border-radius(
  tlbl,
  @context: @baseFontPx,
  @tl: null,
  @bl: null
) {
  .topUnitReturn(@tl,@context);
  .bottomUnitReturn(@bl,@context);
  -webkit-border-radius: @top 0 0 @bottom;
  -moz-border-radius: @top 0 0 @bottom;
  -o-border-radius: @top 0 0 @bottom;
  border-radius: @top 0 0 @bottom;
}

// Top-Left + Bottom-Right Radius
.border-radius(
  trbr,
  @context: @baseFontPx,
  @tr: null,
  @br: null
) {
  .topUnitReturn(@tr,@context);
  .bottomUnitReturn(@br,@context);
  -webkit-border-radius: 0 @top @bottom 0;
  -moz-border-radius: 0 @top @bottom 0;
  -o-border-radius: 0 @top @bottom 0;
  border-radius: 0 @top @bottom 0;
}

// All Four Radii
.border-radius(
  tlrbrl,
  @context: @baseFontPx,
  @tl,
  @tr,
  @br,
  @bl
) {
  .topUnitReturn(@tl,@context);
  .rightUnitReturn(@tr,@context);
  .bottomUnitReturn(@br,@context);
  .leftUnitReturn(@bl,@context);
  -webkit-border-radius: @top @right @bottom @left;
  -moz-border-radius: @top @right @bottom @left;
  -o-border-radius: @top @right @bottom @left;
  border-radius: @top @right @bottom @left;
}


// ==========================================================================
// Use-Specific  Mixins
// ==========================================================================
.popupShadow(
  @shadowColour: rgba(0,0,0,.12)
) {
  .box-shadow(0 round(unit((9 / @baseFontPx),em),8) round(unit((27 / @baseFontPx),em),8) @shadowColour);
}

.threeDShadow(
@shadowFace: @grey300,
@b: 1
) {
  .border(b,@baseFontPx,@b,@shadowFace);
}

// CSS3 Viewport
#viewport(
  @width: ((320 / 16) + 0em)
) {
  @-webkit-viewport {width: @width;}
  @-moz-viewport {width: @width;}
  @-o-viewport {width: @width;}
  @-ms-viewport {width: @width;}
  //@viewport {width: @width;}
}

//Removing contents of mixin as no longer needed in safari,
//but leaving mixin as to not break teams calling it
//https://jira.sea.corp.expecn.com/jira/browse/CSE-3317
.stopTransitionFlicker(){
}

//force hardware acceleration - includes additional speed boosts
.forceAcceleration(){
  // limiting to only -webkit due to FF bug
  -webkit-transform: translate3D(0,0,0);
}



// ==========================================================================
// Modals
// ==========================================================================
#modalTransitions() {
  //scale 0 -> 1
  .contentTransform(@arguments) {
    -webkit-transition: ~"-webkit-transform" @arguments;
    -o-transition: ~"-o-transform" @arguments;
    -ms-transition: ~"-ms-transform" @arguments;
    -moz-transition: ~"-moz-transform" @arguments;
    transition: transform @arguments;
  }
}
// ==========================================================================
// Off Canvas
// ==========================================================================
@offCanvasTransitionTime: 360ms;
@offCanvasTransitionType: cubic-bezier(0.230, 1.000, 0.320, 1.000);
#offCanvas(){

  .siteContentWrap(){
    overflow:hidden;
    width:100%;
  }

  //for when the site column is hidden
  #hidden(){
    .columnLeft(
      @colCount: 1,
      @cols: 6,
      @transitionTime: @offCanvasTransitionTime,
      @target: @baseFontPx
    ) {
      @width:(100 / @cols) * @colCount;

      margin-left:-@width + 0%;
      .padding(trbl,@target,@baseSpacingVert,0,@baseSpacingVert,@baseSpacingHorz);
      position:relative;
      width: @width + 0%;
    }

    .columnRight(
      @colCount: 1,
      @cols: 6,
      @transitionTime: @offCanvasTransitionTime,
      @target: @baseFontPx
    ) {
      @width:(100 / @cols) * @colCount;
      margin-left: 0;
      margin-right:-@width + 0%;
      .padding(trbl,@target,@baseSpacingVert,0,@baseSpacingVert,@baseSpacingHorz);
      position:relative;
      width: @width + 0%;
    }

    .siteContent(
      @transitionTime: @offCanvasTransitionTime
    ) {
      position:relative;
    }
  }

  //for when the site column is visible
  #visible(){
//    .column(
//      @transitionTime: @offCanvasTransitionTime
//    ) {
//      .transition(
//        width @transitionTime @offCanvasTransitionType 0s~","
//        margin-left @transitionTime @offCanvasTransitionType 0s~","
//        margin-right @transitionTime @offCanvasTransitionType 0s);
//    }

    .siteContentLeft(
      @colCount: 1,
      @cols: 6,
      @target: @baseFontPx
    ) {
      @width:(100 / @cols) * @colCount;

      // left:@width + 0%;
      .transform(translateX(@width + 0%));
    }

    .siteContentRight(
      @colCount: 1,
      @cols: 6,
      @target: @baseFontPx
    ) {
      @width:(100 / @cols) * @colCount;

      // right:@width + 0%;
      .transform(translateX(-@width + 0%));
    }
  }
}