/* -------------------------------------------
	Alpha Mixins

	1. Core Functions & Mixins
	2. Media Mixin
	3. Grid Mixin
	4. Component Variant Mixin
	5. Directional Functions

------------------------------------------- */

/**
 * 1. Core Functions
 */
$use_map: (
	) !default; // Used flag map for optimization
$config: (
); // Config map


// # Get value function   
@function _get($obj, $keys ) {
	$data: $obj;

	@each $key in $keys {
		$data: map-get($data, $key );

		@if ($data ==null or $data ==false) {
			@return false;
		}
	}

	@return $data;
}

// Use This
@function get($keys... ) {
	@return _get($config, $keys);
}

/**
  * 2. Media Mixin
  */

// CSS for only Internet Explorer 10, 11
@mixin only-for-ie() {

	@media (-ms-high-contrast: active),
	(-ms-high-contrast: none) {
		@content;
	}
}

// CSS for only Edge
@mixin only-for-edge() {
	@supports (-ms-ime-align:auto) {
		@content;
	}
}

// CSS for retina display
@mixin only-for-retina($pixel-ratio : 1.5) {

	@media (-webkit-min-device-pixel-ratio: #{$pixel-ratio}),
	(min--moz-device-pixel-ratio: #{$pixel-ratio}),
	(min-device-pixel-ratio: #{$pixel-ratio}) {
		@content;
	}
}

// CSS for responsive
// Use @include mq(lg, max) for max-width or @include mq(lg)
@mixin mq($mq-breakpoint, $mq-width: 'min-width', $mq-breakpoints: $breakpoints) {
	@if $mq-width =='max' {
		$mq-width: 'max-width';
		$mq-breakpoints: $max-breakpoints;
	}

	// If $mq-breakpoint is a key that exists in this
	@if map-has-key($mq-breakpoints, $mq-breakpoint) {
		$mq-breakpoint: map-get($mq-breakpoints, $mq-breakpoint);
	}

	@media (#{$mq-width}: #{$mq-breakpoint}) {
		@content;
	}
}

/**
  * 3. Grid Mixin
  */
@mixin cols-css($breakpoint: '') {
	@if ($breakpoint =='') {
		@for $i from 1 through 8 {
			.cols-#{$i} {
				--alpha-col: #{$i};
			}
		}
	}

	@else {
		@for $i from 1 through 8 {
			.cols-#{$breakpoint + '-' + $i} {
				--alpha-col: #{$i};
			}
		}
	}
}

@mixin col-css($breakpoint: '') {
	@if ($breakpoint =='') {
		@for $i from 1 through 12 {
			.col-#{$i} {
				--alpha-col: #{ round(12 / $i * 100000) / 100000 };
			}
		}
	}

	@else {
		@for $i from 1 through 12 {
			.col-#{$breakpoint + '-' + $i} {
				--alpha-col: #{ round(12 / $i * 100000) / 100000 };
			}
		}
	}
}

/**
  * 4. Component Variant Mixin
  */

// Button Variant Mixin
@mixin button-variant($color, $hover-color ) {
	color: #fff;
	border-color: $color;
	background-color: $color;

	&:hover,
	&:active,
	&:focus {
		color: #fff;
		border-color: $hover-color;
		background-color: $hover-color;
	}

	&.btn-solid {
		color: $color;
		border-color: #fff;
		background-color: #fff;

		&:hover,
		&:active,
		&:focus {
			border-color: $color;
			background-color: $color;
			color: #fff;
		}
	}

	&.btn-outline {
		color: $color;
		border-color: $color;
		background-color: transparent;

		&:hover,
		&:active,
		&:focus {
			background-color: $color;
			color: #fff;
		}
	}

	&.btn-outline3 {
		color: $color;
		border-color: $color;
		background-color: transparent;

		&:before,
		&:after {
			background-color: $color;
		}
	}

	&.btn-link {
		background-color: transparent;
		color: $color;

		&:hover,
		&:active,
		&:focus {
			color: var(--alpha-change-color-dark-1);
		}
	}

	&.btn-underline {

		&:hover,
		&:active,
		&:focus {
			color: $color;
		}
	}
}

@mixin text-block($row-count: 2) {
	display: -webkit-box;
	-webkit-line-clamp: $row-count;
	-webkit-box-orient: vertical;
	overflow: hidden;
}