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

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

		 @include breakpoint(768)	{ } sm
		 @include breakpoint(1024)	{ } md
		 @include breakpoint(1280)	{ } lg
		 @include breakpoint(1536)	{ } xl
		 @include breakpoint(1140)	{ } header
	* ------------------------------------------------------------ */
@mixin breakpoint($class) {
	@if $class==sm {
		@media (min-width: 48em) {
			@content;
		}
	}

	@else if $class==md {
		@media (min-width: 64em) {
			@content;
		}
	}

	@else if $class==lg {
		@media (min-width: 80em) {
			@content;
		}
	}

	@else if $class==xl {
		@media (min-width: 96em) {
			@content;
		}
	}

	@else if $class==header {
		@media (min-width: 71.25em) {
			@content;
		}
	}

	@else {
		@warn "Breakpoint mixin supports: sm, md, lg, xl, header";
	}
}

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

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

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

/* Responsive Spacing */
@mixin s-r-0($property) {
	#{$property}: $s-0;
}

@mixin s-r-1($property) {
	#{$property}: $s-1;
}

@mixin s-r-2($property) {
	#{$property}: $s-2;
}

@mixin s-r-3($property) {
	#{$property}: $s-3;
}

@mixin s-r-4($property) {
	#{$property}: $s-4;
}

@mixin s-r-5($property) {
	#{$property}: $s-4;

	@include breakpoint(lg) {
		#{$property}: $s-5;
	}
}

@mixin s-r-6($property) {
	#{$property}: $s-4;

	@include breakpoint(md) {
		#{$property}: $s-5;
	}

	@include breakpoint(lg) {
		#{$property}: $s-6;
	}
}

@mixin s-r-7($property) {
	#{$property}: $s-4;

	@include breakpoint(sm) {
		#{$property}: $s-5;
	}

	@include breakpoint(md) {
		#{$property}: $s-6;
	}

	@include breakpoint(lg) {
		#{$property}: $s-7;
	}
}

@mixin s-r-8($property) {
	#{$property}: $s-5;

	@include breakpoint(sm) {
		#{$property}: $s-6;
	}

	@include breakpoint(md) {
		#{$property}: $s-7;
	}

	@include breakpoint(lg) {
		#{$property}: $s-8;
	}
}

@mixin s-r-9($property) {
	#{$property}: $s-6;

	@include breakpoint(sm) {
		#{$property}: $s-7;
	}

	@include breakpoint(md) {
		#{$property}: $s-8;
	}

	@include breakpoint(lg) {
		#{$property}: $s-9;
	}
}

@mixin s-r-10($property) {
	#{$property}: $s-7;

	@include breakpoint(sm) {
		#{$property}: $s-8;
	}

	@include breakpoint(md) {
		#{$property}: $s-9;
	}

	@include breakpoint(lg) {
		#{$property}: $s-10;
	}
}

@mixin s-r-11($property) {
	#{$property}: $s-8;

	@include breakpoint(sm) {
		#{$property}: $s-9;
	}

	@include breakpoint(md) {
		#{$property}: $s-10;
	}

	@include breakpoint(lg) {
		#{$property}: $s-11;
	}
}

@mixin s-r-12($property) {
	#{$property}: $s-9;

	@include breakpoint(sm) {
		#{$property}: $s-10;
	}

	@include breakpoint(md) {
		#{$property}: $s-11;
	}

	@include breakpoint(lg) {
		#{$property}: $s-12;
	}
}

@mixin s-r-13($property) {
	#{$property}: $s-10;

	@include breakpoint(sm) {
		#{$property}: $s-11;
	}

	@include breakpoint(md) {
		#{$property}: $s-12;
	}

	@include breakpoint(lg) {
		#{$property}: $s-13;
	}
}

@mixin s-r-14($property) {
	#{$property}: $s-11;

	@include breakpoint(sm) {
		#{$property}: $s-12;
	}

	@include breakpoint(md) {
		#{$property}: $s-13;
	}

	@include breakpoint(lg) {
		#{$property}: $s-14;
	}
}

@mixin s-r-15($property) {
	#{$property}: $s-12;

	@include breakpoint(sm) {
		#{$property}: $s-13;
	}

	@include breakpoint(md) {
		#{$property}: $s-14;
	}

	@include breakpoint(lg) {
		#{$property}: $s-15;
	}
}

@mixin s-r-16($property) {
	#{$property}: $s-13;

	@include breakpoint(sm) {
		#{$property}: $s-14;
	}

	@include breakpoint(md) {
		#{$property}: $s-15;
	}

	@include breakpoint(lg) {
		#{$property}: $s-16;
	}
}

@mixin s-r-17($property) {
	#{$property}: $s-14;

	@include breakpoint(sm) {
		#{$property}: $s-15;
	}

	@include breakpoint(md) {
		#{$property}: $s-16;
	}

	@include breakpoint(lg) {
		#{$property}: $s-17;
	}
}

@mixin s-r-18($property) {
	#{$property}: $s-15;

	@include breakpoint(sm) {
		#{$property}: $s-16;
	}

	@include breakpoint(md) {
		#{$property}: $s-17;
	}

	@include breakpoint(lg) {
		#{$property}: $s-18;
	}
}

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

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

/* Font Weights */
@mixin font-light {
	font-weight: 300;
}

@mixin font-regular {
	font-weight: normal;
}

@mixin font-bold {
	font-weight: bold;
}

/* Heading Font Sizes */
@mixin font-h-1 {
	font-size: 1rem !important;
}

@mixin font-h-2 {
	font-size: 1.125rem !important;

	@include breakpoint(sm) {
		font-size: 1.25rem !important;
	}

	@include breakpoint(lg) {
		font-size: 1.375rem !important;
	}
}

@mixin font-h-3 {
	font-size: 1.375rem !important;

	@include breakpoint(sm) {
		font-size: 1.5rem !important;
	}

	@include breakpoint(md) {
		font-size: 1.625rem !important;
	}

	@include breakpoint(lg) {
		font-size: 1.75rem !important;
	}
}

@mixin font-h-4 {
	font-size: 1.5rem !important;

	@include breakpoint(sm) {
		font-size: 1.875rem !important;
	}

	@include breakpoint(md) {
		font-size: 2.125rem !important;
	}

	@include breakpoint(lg) {
		font-size: 2.375rem !important;
	}
}

@mixin font-h-5 {
	font-size: 1.75rem !important;

	@include breakpoint(sm) {
		font-size: 2.25rem !important;
	}

	@include breakpoint(md) {
		font-size: 2.625rem !important;
	}

	@include breakpoint(lg) {
		font-size: 3.25rem !important;
	}
}

@mixin font-h-6 {
	font-size: 2.125rem !important;

	@include breakpoint(sm) {
		font-size: 2.75rem !important;
	}

	@include breakpoint(md) {
		font-size: 3.375rem !important;
	}

	@include breakpoint(lg) {
		font-size: 4.375rem !important;
	}
}

@mixin font-h-7 {
	font-size: 2.375rem !important;

	@include breakpoint(sm) {
		font-size: 3.25rem !important;
	}

	@include breakpoint(md) {
		font-size: 4.375rem !important;
	}

	@include breakpoint(lg) {
		font-size: 5.75rem !important;
	}
}

@mixin font-h-8 {
	font-size: 2.875rem !important;

	@include breakpoint(sm) {
		font-size: 4rem !important;
	}

	@include breakpoint(md) {
		font-size: 5.625rem !important;
	}

	@include breakpoint(lg) {
		font-size: 7.75rem !important;
	}
}

@mixin font-h-9 {
	font-size: 3.25rem !important;

	@include breakpoint(sm) {
		font-size: 4.875rem !important;
	}

	@include breakpoint(md) {
		font-size: 7.25rem !important;
	}

	@include breakpoint(lg) {
		font-size: 10.375rem !important;
	}
}

@mixin font-h-10 {
	font-size: 3.75rem !important;

	@include breakpoint(sm) {
		font-size: 6rem !important;
	}

	@include breakpoint(md) {
		font-size: 9.25rem !important;
	}

	@include breakpoint(lg) {
		font-size: 13.875rem !important;
	}
}

@mixin font-h-11 {
	font-size: 4.375rem !important;

	@include breakpoint(sm) {
		font-size: 10.375rem !important;
	}

	@include breakpoint(md) {
		font-size: 11.75rem !important;
	}

	@include breakpoint(lg) {
		font-size: 18.625rem !important;
	}
}

@mixin font-h-12 {
	font-size: 5.125rem !important;

	@include breakpoint(sm) {
		font-size: 8.875rem !important;
	}

	@include breakpoint(md) {
		font-size: 15.125rem !important;
	}

	@include breakpoint(lg) {
		font-size: 25rem !important;
	}
}

/* Body Fonts */
@mixin font-body-2xs {
	font-size: 0.75rem;
}

@mixin font-body-xs {
	font-size: 0.875rem;
}

@mixin font-body-s {
	font-size: 1rem;
}

@mixin font-body-m {
	font-size: 1.125rem;

	@include breakpoint(lg) {
		font-size: 1.25rem;
	}
}

@mixin font-body-l {
	font-size: 1.25rem;

	@include breakpoint(md) {
		font-size: 1.375rem;
	}

	@include breakpoint(lg) {
		font-size: 1.5rem;
	}
}

@mixin font-body-xl {
	font-size: 1.375rem;

	@include breakpoint(sm) {
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		font-size: 1.75rem;
	}
}

@mixin font-body-2xl {
	font-size: 1.5rem;

	@include breakpoint(sm) {
		font-size: 1.75rem;
	}

	@include breakpoint(md) {
		font-size: 1.875rem;
	}

	@include breakpoint(lg) {
		font-size: 2.125rem;
	}
}

@mixin font-body-3xl {
	font-size: 1.625rem;

	@include breakpoint(sm) {
		font-size: 2rem;
	}

	@include breakpoint(md) {
		font-size: 2.25rem;
	}

	@include breakpoint(lg) {
		font-size: 2.5rem;
	}
}

@mixin font-body-4xl {
	font-size: 1.875rem;

	@include breakpoint(sm) {
		font-size: 2.25rem;
	}

	@include breakpoint(md) {
		font-size: 2.625rem;
	}

	@include breakpoint(lg) {
		font-size: 3rem;
	}
}

/* Code */
@mixin font-code {
	font-family: $font__code;
	font-size: 14px;
	line-height: 1.43;
}

/* Buttons */
@mixin btn {
	display: inline-block;
	line-height: 1;
	font-weight: normal;
	@include transition-default;

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

@mixin btn-primary {
	color: var(--global--color-white);
	fill: var(--global--color-white);
	background-color: var(--global--color-primary);
}

@mixin btn-outline {
	color: var(--global--color-primary);
	fill: var(--global--color-primary);
	box-shadow: inset 0 0 0 1px var(--global--color-primary);

	&:hover {
		color: var(--global--color-primary);
		fill: var(--global--color-primary);
	}
}

@mixin btn-naked {
	display: inline-block;
	font-weight: normal;
	color: var(--global--color-text-two);
	fill: var(--global--color-text-two);

	&:hover {
		color: var(--global--color-primary);
		fill: var(--global--color-primary);
	}
}

/* Button Sizes */
@mixin btn-ssx {
	padding: 0.75rem;
	font-size: 0.75rem;
}

@mixin btn-sx {
	padding: 0.875rem;
	font-size: 0.875rem;
}

@mixin btn-s {
	padding: 1rem;
	font-size: 1rem;
}

@mixin btn-m {
	padding: 1.125rem;
	font-size: 1.125rem;

	@include breakpoint(lg) {
		padding: 1.25rem;
		font-size: 1.25rem;
	}
}

@mixin btn-l {
	padding: 1.25rem;
	font-size: 1.25rem;

	@include breakpoint(md) {
		padding: 1.375rem;
		font-size: 1.375rem;
	}

	@include breakpoint(lg) {
		padding: 1.5rem;
		font-size: 1.5rem;
	}
}

@mixin btn-xl {
	padding: 1.375rem;
	font-size: 1.375rem;

	@include breakpoint(sm) {
		padding: 1.5rem;
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		padding: 1.625rem;
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		padding: 1.75rem;
		font-size: 1.75rem;
	}
}

@mixin btn-xxl {
	padding: 1.5rem;
	font-size: 1.5rem;

	@include breakpoint(sm) {
		padding: 1.75rem;
		font-size: 1.75rem;
	}

	@include breakpoint(md) {
		padding: 1.875rem;
		font-size: 1.875rem;
	}

	@include breakpoint(lg) {
		padding: 2.125rem;
		font-size: 2.125rem;
	}
}

@mixin btn-xxxl {
	padding: 1.625rem;
	font-size: 1.625rem;

	@include breakpoint(sm) {
		padding: 2rem;
		font-size: 2rem;
	}

	@include breakpoint(md) {
		padding: 2.25rem;
		font-size: 2.25rem;
	}

	@include breakpoint(lg) {
		padding: 2.5rem;
		font-size: 2.5rem;
	}
}

@mixin btn-xxxxl {
	padding: 1.875rem;
	font-size: 1.875rem;

	@include breakpoint(sm) {
		padding: 2.25rem;
		font-size: 2.25rem;
	}

	@include breakpoint(md) {
		padding: 2.625rem;
		font-size: 2.625rem;
	}

	@include breakpoint(lg) {
		padding: 3rem;
		font-size: 3rem;
	}
}

/* Pills */
@mixin pill {
	background: transparent;
	color: var(--global--color-text-one);
	border: 1px solid var(--global--color-text-one);
	line-height: 1;

	&:hover {
		color: var(--global--color-background);
		background: var(--global--color-text-one);
	}
}

@mixin pill-xxxxl {
	font-size: 1.875rem;
	border-radius: 2rem;
	padding: 0.438rem $s-6;

	@include breakpoint(sm) {
		font-size: 2.25rem;
	}

	@include breakpoint(md) {
		font-size: 2.625rem;
	}

	@include breakpoint(lg) {
		font-size: 3rem;
	}
}

@mixin pill-xxxl {
	font-size: 1.625rem;
	border-radius: 1.75rem;
	padding: 0.438rem 1.375rem;

	@include breakpoint(sm) {
		font-size: 2rem;
	}

	@include breakpoint(md) {
		font-size: 2.25rem;
	}

	@include breakpoint(lg) {
		font-size: 2.5rem;
	}
}

@mixin pill-xxl {
	font-size: $s-6;
	border-radius: $s-6;
	padding: 0.375rem $s-5;

	@include breakpoint(sm) {
		font-size: 1.75rem;
	}

	@include breakpoint(md) {
		font-size: 1.875rem;
	}

	@include breakpoint(lg) {
		font-size: 2.125rem;
	}
}

@mixin pill-xl {
	font-size: 1.375rem;
	border-radius: 1.313rem;
	padding: 0.375rem 1.125rem;

	@include breakpoint(sm) {
		font-size: 1.5rem;
	}

	@include breakpoint(md) {
		font-size: 1.625rem;
	}

	@include breakpoint(lg) {
		font-size: 1.75rem;
	}
}

@mixin pill-l {
	font-size: 1.25rem;
	border-radius: 1.125rem;
	padding: 0.313rem $s-4; // 6px and 16px

	@include breakpoint(md) {
		font-size: 1.375rem;
	}

	@include breakpoint(lg) {
		font-size: 1.5rem;
	}
}

@mixin pill-m {
	font-size: 1.125rem;
	border-radius: $s-4;
	padding: 0.313rem 0.875rem; // 6px and 14px

	@include breakpoint(lg) {
		font-size: 1.25rem;
	}
}

@mixin pill-m-icon {
	font-size: 1.125rem;
	border-radius: $s-4;
	padding: .25rem .875rem .25rem 3.875rem;

	@include breakpoint(lg) {
		font-size: 1.25rem;
		padding: .313rem .875rem .313rem 3.875rem;
	}
}

@mixin pill-s {
	font-size: 1rem;
	border-radius: 0.813rem;
	padding: 0.25rem 0.75rem;
}

@mixin pill-xs {
	font-size: 0.875rem;
	border-radius: 0.75rem;
	padding: 0.25rem 0.625rem;
}

@mixin pill-xxs {
	font-size: 0.75rem;
	border-radius: 0.625rem;
	padding: 0.188rem 0.5rem;
}

/* Avatars */
@mixin avatar-l {
	width: $s-11;
	height: $s-11;
	min-width: $s-11;
	min-height: $s-11;

	@include breakpoint(sm) {
		width: $s-12;
		height: $s-12;
	}

	@include breakpoint(md) {
		width: $s-13;
		height: $s-13;
	}

	@include breakpoint(lg) {
		width: $s-14;
		height: $s-14;
	}
}

@mixin avatar-m {
	width: $s-9;
	height: $s-9;
	min-width: $s-9;
	min-height: $s-9;

	@include breakpoint(sm) {
		width: $s-10;
		height: $s-10;
	}
}

@mixin avatar-s {
	width: $s-8;
	height: $s-8;
	min-width: $s-8;
	min-height: $s-8;

	@include breakpoint(sm) {
		width: $s-9;
		height: $s-9;
		max-width: $s-9;
	}
}

/* Divider short */

@mixin divider {
	content: "";
	display: block;
	background-color: var(--global--color-border);
	height: 1px;
	margin-left: $s-2;
	margin-right: $s-2;
}

@mixin divider-s {
	@include s-r-8 (width);
}

@mixin divider-m {
	@include s-r-9 (width);
}

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

	&:-moz-placeholder {
		@content;
	}

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

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

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

/* Grid padding */
@mixin col-padding {
	padding-left: $s-4;
	padding-right: $s-4;

	@include breakpoint(sm) {
		padding-left: $s-6;
		padding-right: $s-6;
	}
}

@mixin outer-margins {
	padding-left: $s-4;
	padding-right: $s-4;

	@include breakpoint(sm) {
		padding-left: $s-7;
		padding-right: $s-7;
	}

	@include breakpoint(lg) {
		padding-left: $s-9;
		padding-right: $s-9;
	}

	@include breakpoint(xl) {
		padding-left: $s-6;
		padding-right: $s-6;
	}
}

@mixin default-margins {
	padding-left: $s-4;
	padding-right: $s-4;

	@include breakpoint(sm) {
		padding-left: 0;
		padding-right: 0;
	}
}

@mixin col-margins {

	@include breakpoint(sm) {
		margin-left: $s-4;
		margin-right: $s-4;
	}

	@include breakpoint(lg) {
		margin-left: $s-6;
		margin-right: $s-6;
	}
}

/* Border Radius */
@mixin border-radius($radius) {
	border-radius: $radius;
}

@mixin border-radius-none {
	border-radius: 0;
}

@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 in 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);
}

/* Shadow Navigation bar */
@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);
}

/* Shadows 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);
}

/* Shadows 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);
}

@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);
}

/* 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;
	}
}