$var: true !default; // Can be overridden elsewhere

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

		 @include breakpoint(600)	{ } s
		 @include breakpoint(776)	{ } m
		 @include breakpoint(1224)	{ } l
		 @include breakpoint(1296)	{ } xl
		 @include breakpoint(1536)	{ } xxl
		 @include breakpoint(1140)	{ } header
	* ------------------------------------------------------------ */
@mixin breakpoint($class) {
	@if $class == s {
		@media (min-width: 37.50em) {
			@content;
		}
	} @else
	if $class == m {
		@media (min-width: 48.50em) {
			@content;
		}
	} @else
	if $class == l {
		@media (min-width: 76.50em) {
			@content;
		}
	} @else
	if $class == xl {
		@media (min-width: 81.00em) {
			@content;
		}
	} @else
	if $class == xxl {
		@media (min-width: 96em) {
			@content;
		}
	} @else
	if $class == header {
		@media (min-width: 71.25em) {
			@content;
		}
	} @else {
		@warn "Breakpoint mixin supports: xs, s, m, l, xl, xxl";
	}
}

//margin centering
@mixin push--auto {
	margin: {
		left: auto;
		right: auto;
	}
}

// Flexbox
@mixin flexbox {
	display: flex;
}

@mixin flex-center {
	align-items: center;
	justify-content: center;
}

// Base Typography

// Base Typography
@mixin hyphenation {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

@mixin font-body {
	font-family: $font__body;
}

// Font Weights
@mixin font-light {
	font-weight: 300;
}
@mixin font-regular {
	font-weight: normal;
}
@mixin font-bold {
	font-weight: bold;
}

// px to rem convertion
@function calculateRem($size) {
	$remSize: $size / 16px;
	@return #{$remSize}rem;
}

@mixin fontSize($size) {
	font-size: calculateRem($size);
}

@mixin letterSpacing($size) {
	letter-spacing: calculateRem($size);
}

// Heading Fonts
@mixin font-h-a {
	@include fontSize(16px);
	line-height: 1.187; // 19px
	letter-spacing: 0;
}

@mixin font-h-b {
	@include fontSize(19px);
	line-height: 1.21; // 23px
	letter-spacing: 0;

	@include breakpoint(m) {
		@include fontSize(21px);
		line-height: 1.143; // 24px
	}
}

@mixin font-h-c {
	@include fontSize(23px);
	line-height: 1.174; // 27px
	@include letterSpacing(-0.58px);

	@include breakpoint(m) {
		@include fontSize(28px);
		line-height: 1.178; // 33px
		@include letterSpacing(-0.7px);
	}
}

@mixin font-h-d {
	@include fontSize(28px);
	line-height: 1.178; // 33px
	@include letterSpacing(-0.7px);

	@include breakpoint(m) {
		@include fontSize(38px);
		line-height: 1.157; // 33px
		@include letterSpacing(-0.95px);
	}
}

@mixin font-h-e {
	@include fontSize(33px);
	line-height: 1.182; // 39px
	@include letterSpacing(-0.83px);

	@include breakpoint(m) {
		@include fontSize(51px);
		line-height: 1.157; // 59px
		@include letterSpacing(-1.28px);
	}
}

@mixin font-h-f {
	@include fontSize(40px);
	line-height: 1.175; // 47px
	@include letterSpacing(-1px);

	@include breakpoint(m) {
		@include fontSize(67px);
		line-height: 1.164; // 78px
		@include letterSpacing(-1.68px);
	}
}

@mixin font-h-g {
	@include fontSize(48px);
	line-height: 1;
	@include letterSpacing(-1.2px);

	@include breakpoint(m) {
		@include fontSize(90px);
		line-height: 1;
		@include letterSpacing(-2.25px);
	}
}

@mixin font-h-h {
	@include fontSize(58px);
	line-height: 1;
	@include letterSpacing(-1.45px);

	@include breakpoint(m) {
		@include fontSize(120px);
		line-height: 1;
		@include letterSpacing(-3px);
	}
}

@mixin font-h-i {
	@include fontSize(69px);
	line-height: 1;
	@include letterSpacing(-1.73px);

	@include breakpoint(m) {
		@include fontSize(160px);
		line-height: 1;
		@include letterSpacing(-4px);
	}
}

@mixin font-h-j {
	@include fontSize(83px);
	line-height: 1;
	@include letterSpacing(-2.08px);

	@include breakpoint(m) {
		@include fontSize(213px);
		line-height: 1;
		@include letterSpacing(-5.33px);
	}
}

@mixin font-h-k {
	@include fontSize(99px);
	line-height: 1;
	@include letterSpacing(-2.48px);

	@include breakpoint(m) {
		@include fontSize(283px);
		line-height: 1;
		@include letterSpacing(-7.08px);
	}
}

@mixin font-h-l {
	@include fontSize(119px);
	line-height: 1;
	@include letterSpacing(-2.98px);

	@include breakpoint(m) {
		@include fontSize(378px);
		line-height: 1;
		@include letterSpacing(-9.45px);
	}
}

// Body Fonts
@mixin font-body-xxl {
	@include fontSize(26px);
	line-height: 1.538; // 40px

	@include breakpoint(m) {
		@include fontSize(35px);
		line-height: 1.6; // 56px
	}
}

@mixin font-body-xl {
	@include fontSize(24px);
	line-height: 1.542; // 37px

	@include breakpoint(m) {
		@include fontSize(29px);
		line-height: 1.655; // 48px
	}
}

@mixin font-body-l {
	@include fontSize(22px);
	line-height: 1.5454; // 34px

	@include breakpoint(m) {
		@include fontSize(24px);
		line-height: 1.666; // 40px
	}
}

@mixin font-body-m {
	@include fontSize(20px);
	line-height: 1.6; // 32px
}

@mixin font-body-s {
	@include fontSize(16px);
	line-height: 1.1875; // 19px
}

@mixin font-body-xs {
	@include fontSize(14px);
	line-height: 1.428; // 20px
}

@mixin font-body-xxs {
	@include fontSize(12px);
	line-height: 1.333; // 16px
}

@mixin font-label {
	@include fontSize(12px);
	line-height: 1.333; // 16px
	letter-spacing: 0.063rem;
	text-transform: uppercase;
	color: $color__text_two;
}

@mixin font-code {
	font-family: $font__code;
	@include fontSize(14px);
	line-height: 1.43;
}

// Buttons
@mixin btn {
	display: inline-block;
	@include fontSize(16px);
	line-height: 1.1875; // 19px
	font-weight: normal;
	@include transition-default;
	width: 100%;

	@include breakpoint(s) {
		width: auto;
	}

	&:hover {
		-webkit-transform: translateY(-2px);
		transform: translateY(-2px);
	}
}

@mixin btn-primary {
	color: $color__white;
	fill: $color__white;
	background-color: $color__primary;
}

@mixin btn-outline {
	color: $color__primary;
	fill: $color__primary;
	box-shadow: inset 0 0 0 1px $color__primary;

	&:hover {
		color: $color__primary;
		fill: $color__primary;
	}
}

@mixin btn-naked {
	display: inline-block;
	@include fontSize(16px);
	line-height: 1.5; // 24px
	font-weight: normal;
	color: $color__text_two;
	fill: $color__text_two;

	&:hover {
		color: $color__primary;
		fill: $color__primary;
	}
}

// Button sizes
@mixin btn-s {
	padding-top: 11px;
	padding-bottom: 10px;

	@include breakpoint(s) {
		padding-left: $spacing-3;
		padding-right: $spacing-3;
	}
}

@mixin btn-m {
		padding-top: 19px;
		padding-bottom: 18px;

	@include breakpoint(s) {
		padding-left: $spacing-desktop-4;
		padding-right: $spacing-desktop-4;
	}
}

@mixin btn-l {
		padding-top: 19px;
		padding-bottom: 18px;

	@include breakpoint(s) {
		padding-left: $spacing-desktop-5;
		padding-right: $spacing-desktop-5;
	}

	@include breakpoint(m) {
		padding-top: 27px;
		padding-bottom: 26px;
	}
}

// Avatar Sizes
@mixin avatar-xl {
	width: 160px;
	height: 160px;
}

@mixin avatar-l {
	width: 96px;
	height: 96px;
}

@mixin avatar-m {
	width: 56px;
	height: 56px;
}

@mixin avatar-s {
	width: 40px;
	height: 40px;
	min-width: 40px;
}

@mixin avatar-xs {
	width: 24px;
	height: 24px;
	min-width: 24px;
}

// Placeholders
@mixin input-placeholder {
	&.placeholder {
		@content;
	}

	&:-moz-placeholder {
		@content;
	}

	&::-moz-placeholder {
		@content;
	}

	&:-ms-input-placeholder {
		@content;
	}

	&::-webkit-input-placeholder {
		@content;
	}
}

// Mixin grid padding
@mixin col-padding {
	padding-left: $spacing-3;
	padding-right: $spacing-3;
	@include breakpoint(m) {
		padding-left: $spacing-3;
		padding-right: $spacing-3;
	}
}

// Border Radius
@mixin border-radius($radius) {
	border-radius: $radius;
}
@mixin border-radius-none {
		border-radius: 0;
}
@mixin border-radius-xs {
	border-radius: $border-radius-xs;
}
@mixin border-radius-s {
		border-radius: $border-radius-s;
}
@mixin border-radius-m {
		border-radius: $border-radius-m;
}
@mixin border-radius-l {
		border-radius: $border-radius-l;
}
@mixin border-radius-100 {
		border-radius: 50%;
}

// Shadows
// Used for forms.
@mixin shadow-1 {
	box-shadow        : 0 2px 6px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
}

// Used for navigation bar bottom shadow.
@mixin shadow-2 {
	box-shadow        : 0 4px 12px 0 rgba(0, 0, 0, 0.06);
	-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.06);
}

// Used for cards, buttons.
@mixin shadow-3 {
	box-shadow        : 0 4px 12px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
}

// Used for cards.
@mixin shadow-4 {
	box-shadow        : 0 12px 32px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.1);
}

// Used for menu dropdown.
@mixin shadow-5 {
	box-shadow        : 0 24px 64px 0 rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0 24px 64px 0 rgba(0, 0, 0, 0.1);
}

@mixin shadow-none {
	box-shadow        : none;
	-webkit-box-shadow: none;
}

// Transitions
@mixin transition-default {
	-webkit-transition: all 0.2s ease;
	transition : all 0.2s ease;
}

@mixin transition-posthover {
	-webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

@mixin avatar-transition {
	-webkit-transform: translate(0px, -2px);
	transform: translate(0px, -2px);
}

// Animations
@mixin scale {
	-webkit-transform: scale(1.01);
	transform        : scale(1.01);
}

@mixin img-bright {
	-webkit-filter: brightness(105%);
	filter: brightness(105%);
}

// Retina Images
@mixin image-2x($image, $width, $height) {
	@media (min--moz-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
		background-image: url($image);
		background-size: $width $height;
	}
}