/* -------------------------------------------
	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-outline {
		color: $color;
		border-color: $color;
		background-color: transparent;
		&:hover,
		&:active,
		&:focus {
			background-color: $color;
			color: #fff;
		}
	}
	&.btn-outline2 {
		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-dark-color);
		}
	}
	&.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;
}