/* -------------------------------------------
	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-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;
 }