//
// Mixins
//

// Simple PX to REM units converter
@function pxToRem($size) {
	@return $size / 16px * 1rem;
}

// Forms > Input Style
@mixin input-style() {
	border: 1px solid $gray;
	background-color: transparent;
	color: $gray-darker;
	font-size: 1em;
	line-height: 1.4;
	height: auto;
	width: auto;
	vertical-align: middle;
	padding: 9px 16px;
	border-radius: 3px;
	flex-grow: 1;
}

// Forms > Input Focus
@mixin input-focus() {

	&:focus {
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
		outline-width: 0;
		outline-style: hidden;
	}
}

// Forms > Input Placeholder
@mixin placeholder-style() {
	color: inherit;
	font-family: inherit;
	opacity: 0.6;
}

@mixin input-placeholder() {

	// Keep the following rules each alone (Auto Prefix Bug)!
	&::-webkit-input-placeholder {
		@include placeholder-style();
	}

	&:-ms-input-placeholder {
		@include placeholder-style();
	}

	&::-moz-placeholder {
		@include placeholder-style();
	}

	&:-moz-placeholder {
		@include placeholder-style();
	}

	&::placeholder {
		@include placeholder-style();
	}
}

@mixin button-types( $selector ) {

	@each $type, $color in (
		info: $info,
		success: $success,
		warning: $warning,
		danger: $danger
	) {
		&#{$type} #{$selector} {
			background-color: $color;
		}
	}
}

@mixin ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

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

@mixin checkers-background($checker-size, $color: #ddd) {
	background-image: linear-gradient(45deg,$color 25%,transparent 0,transparent 75%,$color 0,$color),linear-gradient(45deg,$color 25%,transparent 0,transparent 75%,$color 0,$color);
	background-size: $checker-size $checker-size;
	background-position: 0 0,( $checker-size / 2 ) ( $checker-size / 2 );
}


@mixin webkit-scrollbar($width, $color, $border-radius) {

	&::-webkit-scrollbar {
		width: $width;
	}

	&::-webkit-scrollbar-thumb {
		background-color: $color;
		border-radius: $border-radius;
	}
}
//End