/* WPJobster Mixins SASS file */

@import 'variables';

@mixin big-desktop {
	@media screen and (max-width: 1920px) { @content; }
}

@mixin medium-desktop {
	@media screen and (max-width: 1640px) { @content; }
}

@mixin small-desktop {
	@media screen and (max-width: 1440px) { @content; }
}

@mixin desktop-only {
	@media screen and (min-width: 1258px) { @content; }
}

@mixin big-tablet {
	@media screen and (max-width: 1279px) { @content; }
}

@mixin tablet {
	@media screen and (max-width: 1024px) { @content; }
}

@mixin tablet-only {
	@media screen and (min-width: 768px) and (max-width: 1024px) { @content; }
}

@mixin mobile {
	@media screen and (max-width: 767px) { @content; }
}

@mixin small-mobile {
	@media screen and (max-width: 359px) { @content; }
}

// A map of breakpoints.
$breakpoints: (
	xs: 576px,
	sm: 768px,
	md: 992px,
	lg: 1200px,
	xl: 1400px,
	xxl: 1600px,
	xxxl: 1900px
);

@mixin breakpoint-up($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);
		@media (min-width: $breakpoint-value) {
			@content;
		}
	} @else {
		@warn 'Invalid breakpoint: #{$breakpoint}.';
	}
}

@mixin breakpoint-down($breakpoint) {
	@if map-has-key($breakpoints, $breakpoint) {
		$breakpoint-value: map-get($breakpoints, $breakpoint);
		@media (max-width: ($breakpoint-value - 1)) {
			@content;
		}
	} @else {
		@warn 'Invalid breakpoint: #{$breakpoint}.';
	}
}

@mixin breakpoint-between($lower, $upper) {
	@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
		$lower-breakpoint: map-get($breakpoints, $lower);
		$upper-breakpoint: map-get($breakpoints, $upper);
		@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
			@content;
		}
	} @else {
		@if (map-has-key($breakpoints, $lower) == false) {
			@warn 'Your lower breakpoint was invalid: #{$lower}.';
		}
		@if (map-has-key($breakpoints, $upper) == false) {
			@warn 'Your upper breakpoint was invalid: #{$upper}.';
		}
	}
}

// Typography
@mixin base-typography() {
	font-family: $mainFont;
	line-height: normal;
	font-size: 14px;
	font-weight: 400;
	color: $headlinesColor;
}

@mixin headline-1() {
	@include base-typography();

	font-size: 40px;
	line-height: 150%;
	font-weight: 700;
}

@mixin headline-2() {
	@include base-typography();

	font-size: 24px;
	line-height: 100%;
	font-weight: 600;
}

@mixin headline-3() {
	@include base-typography();

	font-size: 18px;
	line-height: 150%;
	font-weight: 600;
}

@mixin headline-4() {
	@include base-typography();

	font-size: 14px;
	line-height: 150%;
	font-weight: 600;
	letter-spacing: 1px;
}

@mixin headline-5() {
	@include base-typography();

	font-size: 16px;
	line-height: 150%;
	font-weight: 600;
}

@mixin headline-6() {
	@include base-typography();

	font-size: 14px;
	line-height: 150%;
	font-weight: 600;
	letter-spacing: 4px;
	color: $headlinesColor2;
	text-transform: uppercase;
}

// Secondary font
@mixin secondary-font {
	font-family: $mainFont;
	font-size: 14px;
	font-weight: 600;
}

// Box Shadows
@mixin card-shadow() {
	box-shadow: 0px 2px 10px 0px rgba(0, 12, 145, 0.1);
}

@mixin card-shadow-big() {
	box-shadow: 0px 10px 20px 0px rgba(55, 64, 157, 0.15);
}

@mixin dropdown-shadow() {
	box-shadow: 0px 5px 20px 5px rgba(55, 64, 157, 0.20);
}

// Border radius mixins
@mixin default-shape () {
	border-radius: 6px;
}

@mixin default-shape-top-only () {
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
}

@mixin big-shape () {
	border-radius: 10px;
}

// Grey Box with border radius
@mixin grey-card-w-border() {
	background-color: #f6f7fa;
	@include default-shape;
	border: 1px solid $borderColor2;
}

// Gradients
@mixin card-gradient-dark() {
	background-image: -webkit-linear-gradient( 135deg, rgba(0,0,0,0.05098) 0%, rgba(0,0,0,0.14902) 100%);
}

@mixin box-sizing-border-box {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

@mixin transition($type, $value) {
	transition: $type $value;
	-moz-transition: $type $value;
	-webkit-transition: $type $value;
	-o-transition: $type $value;
	-webkit-transition-timing-function: ease;
}

@mixin round($value) {
	-webkit-border-radius: $value;
	-moz-border-radius: $value;
	border-radius: $value;
}