// ********************** //
//    C O N T E N T S     //
// ********************** //

//   1. MEDIA QUERIES
//   2. FONT FACE
//   3. FONT BOLD. - update depending how site font takes bold
//   4. SELF CLEAR
//   5. LETTER SPACING
//   6. PLACEHOLDER
//   7. DROP SHADOW
//   8. OPACITY
//   9. BORDER RADIUS
//  10. TRANSFORM
//  11. VERTICALLY AND/OR CENTRE ALIGNING ELEMENTS
//  12. HIDE DEFAULT OVERFLOW SCROLL IN IE
//  13. HIDE DEFAULT FORM ELEMENT STYLING
//  14. FLEX
//  15. LOADER
//  16. MAGNIFYING GLASS



// ------------------------ //
//     1. MEDIA QUERIES     //
// ------------------------ //
$tablet: 1200; //means up to 1200px
$mobile: 600; // 361px - 600px
$mobileSmall: 360; //0px - 360px

@mixin breakpoint($point) {
	//desktop
	@if $point == desktop{
		@media (min-width: ($tablet+1)+px) { @content; }
	}

	//tablet
	@else if $point == tablet{
		@media (min-width: ($mobile+1)+px) and (max-width: $tablet+px)	{ @content; }
	}

	//mobile
	@else if $point == mobile{
		@media (min-width: 0px) and (max-width: $mobile+px) { @content; }
	}

	//mobile small
	@else if $point == mobileSmall{
		@media (min-width: 0px) and (max-width: $mobileSmall+px) { @content; }
	}
}

@mixin bp($min, $max){
	@media (min-width: $min+px) and (max-width: $max+px) { @content; }
}

@mixin bpmin($min){
	@media (min-width: $min+px) { @content; }
}

@mixin bpmax($max){
	@media (max-width: $max+px) { @content; }
}



// -------------------- //
//     2. FONT FACE     //
// -------------------- //
@mixin font-face($style-name, $file, $family, $category:"") {
    $filepath: "/fonts/" + $family + "/" + $file;
    @font-face {
        font-family: $style-name;
        src: url($filepath + ".eot");
        src: url($filepath + ".eot?#iefix") format('embedded-opentype'), url($filepath + ".woff") format('woff'), url($filepath + ".ttf")  format('truetype'), url($filepath + ".svg#" + $style-name + "") format('svg');
    }
}



// -------------------- //
//     3. FONT BOLD     //
// -------------------- //
@mixin fontBold {
	font-weight: 700;
}



// --------------------- //
//     4. SELF CLEAR     //
// --------------------- //
@mixin selfClear {
	&:after{
		clear: both;
		content: "";
		display: table;
	}
}



// ------------------------- //
//     5. LETTER SPACING     //
// ------------------------- //
@function lSpace($photoshop, $fontsize){
	@return (($photoshop * $fontsize) / 1000)  + px;
}



// ---------------------- //
//     6. PLACEHOLDER     //
// ---------------------- //
@mixin ph($color: #000, $fontSize: 14px, $lineHeight: 14px) {
	input::-webkit-input-placeholder {
		color: $color;
		font-size: $fontSize;
		line-height: $lineHeight;
	}

	input:-moz-placeholder { /* Firefox 18- */
		color: $color;
		font-size: $fontSize;
		line-height: $lineHeight;
	}

	input::-moz-placeholder {  /* Firefox 19+ */
		color: $color;
		font-size: $fontSize;
		line-height: $lineHeight;
	}

	input:-ms-input-placeholder {
		color: $color;
		font-size: $fontSize;
		line-height: $lineHeight;
	}
}



// ------------------ //
//     7. OPACITY     //
// ------------------ //
@mixin opacity($opacity) {
	opacity: $opacity;
	$opacityIE: $opacity * 100;
	filter: alpha(opacity=$opacityIE);
}



// ---------------------- //
//     8. DROP SHADOW     //
// ---------------------- //
@mixin dropShadow ($x: 1px, $y: 1px, $blur: 2px, $spread: 0, $alpha: 0.25) {
	-webkit-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
	-moz-box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
	box-shadow: $x $y $blur $spread rgba(0, 0, 0, $alpha);
}



// ------------------------ //
//     9. BORDER RADIUS     //
// ------------------------ //
@mixin borderRadius ($x: 1px, $y: 1px, $z: 1px, $a: 1px) {
    border-top-left-radius: $x;
    border-top-right-radius: $y;
    border-bottom-right-radius: $z;
    border-bottom-left-radius: $a;
}



// --------------------- //
//     10. TRANSFORM     //
// --------------------- //
@mixin transform($transform...) {
    -webkit-transform: $transform;
    -ms-transform: $transform;
    transform: $transform;
}



// ------------------------------------------------------ //
//     11. VERTICALLY AND/OR CENTRE ALIGNING ELEMENTS     //
// ------------------------------------------------------ //
@mixin verticalAlign {
	position: relative;
	top: 50%;
	@include transform(translateY(-50%));
}

@mixin centrePlaced {
	position: absolute;
	top: 50%;
	left: 50%;
	@include transform(translate(-50%, -50%));
}




// ---------------------------------------------- //
//     12. HIDE DEFAULT OVERFLOW SCROLL IN IE     //
// ---------------------------------------------- //
@mixin overflowScroll {
	-webkit-overflow-scrolling: touch;
	-ms-overflow-style: none;
	overflow: auto;
}



// --------------------------------------------- //
//     13. HIDE DEFAULT FORM ELEMENT STYLING     //
// --------------------------------------------- //
@mixin appearanceNone {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}



// ---------------- //
//     14. FLEX     //
// ---------------- //
@mixin flex($justify: space-between, $align: top) {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

	-webkit-box-flex-direction: row;    /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex-direction: row;       /* OLD - Firefox 19- (buggy but mostly works) */
	-ms-flex-direction: row;            /* TWEENER - IE 10 */
	-webkit-flex-direction: row;        /* NEW - Chrome */
	flex-direction: row;                /* NEW, Spec - Opera 12.1, Firefox 20+ */

	-webkit-box-flex-wrap: wrap;     /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex-wrap: wrap;        /* OLD - Firefox 19- (buggy but mostly works) */
	-ms-flex-flex-wrap: wrap;        /* TWEENER - IE 10 */
	-webkit-flex-wrap: wrap;         /* NEW - Chrome */
	flex-wrap: wrap;                 /* NEW, Spec - Opera 12.1, Firefox 20+ */

	-webkit-box-justify-content: $justify;    /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-justify-content: $justify;       /* OLD - Firefox 19- (buggy but mostly works) */
	-ms-flex-justify-content: $justify;       /* TWEENER - IE 10 */
	-webkit-justify-content: $justify;        /* NEW - Chrome */
	justify-content: $justify;                /* NEW, Spec - Opera 12.1, Firefox 20+ */

	-webkit-box-align-items: $align;    /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-align-items: $align;       /* OLD - Firefox 19- (buggy but mostly works) */
	-ms-flex-align-items: $align;       /* TWEENER - IE 10 */
	-webkit-align-items: $align;        /* NEW - Chrome */
	align-items: $align;                /* NEW, Spec - Opera 12.1, Firefox 20+ */

	&:after {
		all: unset;
	}
}



// ------------------ //
//     15. LOADER     //
// ------------------ //
//- You can use either .gif or this mixin.
//- Use only one.
@mixin loader($size, $thickness, $color1, $color2){
	border: $thickness+px solid $color1;
	border-top: $thickness+px solid $color2;
	border-radius: 50%;
	width: $size+px;
	height: $size+px;
	animation: spin 2s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}



// -----------------------------//
//     16. MAGNIFYING GLASS     //
// -----------------------------//
//- There is CSS version of this .magShortStalk
//- Use only one.

@mixin magGlass($scale, $stalkLength, $color){
	@include transform(scale(#{$scale}));
	border-radius: 50%;
	border: 2px #{$color} solid;
	width: 20px;
	height: 20px;
	position: relative;
	&:after {
		@include transform(rotate(45deg));
		background: $color;
		position:absolute;
		content: "";
	}
	@if $stalkLength == short {
		&:after {
			width: 7px;
			height: 2px;
			bottom:-1px;
			right:-4px;
		}
	}
	@if $stalkLength == long {
		&:after {
			width: 12px;
			height: 2px;
			bottom:-3px;
			right:-8px;
		}
	}
}



@mixin icons($fa-var, $fa-weight) {
	&:after {
		content: "#{$fa-var}";
		display: inline-block;
		font-style: normal;
	}

	@if $fa-weight == light {
		&:after {
			font-family: 'Font Awesome 5 Pro';
			font-weight: 300;
		}
	}

	@if $fa-weight == reg {
		&:after {
			font-family: 'Font Awesome 5 Pro';
			font-weight: 400;
		}
	}

	@if $fa-weight == solid {
		&:after {
			font-family: 'Font Awesome 5 Pro';
			font-weight: 900;
		}
	}

	@if $fa-weight == brand {
		&:after {
			font-family: 'Font Awesome 5 Brands';
		}
	}
}