/* -------------------------------------------
	Riode Mixins

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

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

/**
 * 1. Core Functions
 */
$is_not_optimize: true !default;	   // Optimize mode
$is_component_optimize: false !default; // Optimize Component
$use_map:() !default;				   // Used flag map for optimization
$config: ();						   // Config map

// # Check used
@function use($key) {
	@if ( $is_not_optimize ) {
		@return true;
	}
	@return map-has-key( $use_map, $key ) and map-get( $use_map, $key );
}

@function use_component($key) {
	@if ( not $is_component_optimize ) {
		@return true;
	}
	@return map-has-key( $use_map, $key ) and map-get( $use_map, $key );
}

// # 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);
}

// # Set value function
// @function _set( $obj, $keys, $value ) {
// 	$changes: $value;

// 	@for $i from length( $keys ) through 1 {
// 		$changes: ( 
// 			nth( $keys, $i ) : $changes
// 		);
// 	}
// 	@return merge( $obj, $changes );
// }

// @function _set-default( $obj, $keys, $value ) {
// 	$changes: $value;

// 	@for $i from length( $keys ) through 1 {
// 		$changes: ( 
// 			nth( $keys, $i ) : $changes
// 		);
// 	}
// 	@return merge( $changes, $obj );
// }

// Use This
// @function set( $keys, $value ) {
// 	@return _set( $config, $keys, $value);
// }

// @function set-default( $keys, $value ) {
// 	@return _set-default( $config, $keys, $value);
// }

@function set( $value ) {
	@return merge( $config, $value );
}

@function set-default( $value ) {
	@return merge( $value, $config );
}

@function merge( $obj1, $obj2 ) {
	$keys: map-keys( $obj1 );
	$keys2: map-keys( $obj2 );

	@each $key in $keys2 {
		@if ( index( $keys, $key ) == null ) {
			$keys: join( $keys, $key);
		}
	}

	$total: ();

	@each $key in $keys {
		$value1: map-get( $obj1, $key);
		$value2: map-get( $obj2, $key);
		$value: null;

		@if ( $value1 != null and $value2 != null ) {

			// if value1, value2 is all map
			@if ( type-of( $value1 ) == map and type-of( $value2 ) == map ) {
				$value: merge( $value1, $value2 );
			}
			@else if ( type-of( $value1 ) == map or type-of( $value2 ) == map ) {

				// if value1 is empty ()
				@if ( type-of( $value1 ) == list and length( $value1 ) == 0 ) {
					$value: $value2;
				}

				// if value2 is empty ()
				@else if ( type-of( $value2 ) == list and length( $value2 ) == 0 ) {
					$value: $value1;
				}
			}
			@else {
				$value: $value2;
			}
		}
		@else if ( $value1 == null ) {
			$value: $value2;
		}
		@else {
			$value: $value1;
		}

		@if ($value != null) {
			$total: map-merge( $total, ($key: $value));
		}
	}

	@return $total;
}

@mixin set( $value ) {
	$config: merge( $config, $value ) !global;
}

@mixin set-default( $value ) {
	$config: merge( $value, $config ) !global;
}

// Print css property
@mixin css( $prop, $keys... ) {
	$value: _get( $config, $keys );

	@if ( $value ) {
		@if ( type-of( $value ) == string and 'font-family' != $prop and 'content' != $prop ) {
			#{$prop}: unquote($value);
		}
		@else {
			#{$prop}: $value;
		}
	}
}

// Print css : only one sub map.
@mixin print_css( $keys... ) {
	$obj: _get( $config, $keys );

	@if ( $obj ) {
		@if ( type-of( $obj ) == map ) {
			$obj_keys: map-keys( $obj );
			@each $key in $obj_keys {
				$value: map-get($obj, $key);

				// print css property and value
				@if ( $value ) {
					@if ( type-of( $value ) == map ) {
						// do nothing
					}
					@else if ( "_" == str_slice( $key, 1, 1 ) ) {
						// special property...
					}
					@else if ( type-of( $value ) == string and 'font-family' != $key and 'content' != $key ) {
						#{$key}: unquote($value);
					}
					@else if ( type-of( $value ) == string and 'font-family' == $key ) {
						#{$key}: unquote($value);
					}
					@else {
						#{$key}: $value;
					}
				}
			}
		}
	}
}


/**
 * 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 {
			@if use(cols-#{$i}) {
				.cols-#{$i} > * { max-width: #{ round( 100% / $i * 10000 ) / 10000 }; flex: 0 0 #{ round( 100% / $i * 10000 ) / 10000 }; }
			}
		}
	} @else {
		@for $i from 1 through 8 {
			@if use(cols-#{$breakpoint + '-' + $i}) {
				.cols-#{$breakpoint + '-' + $i} > * { max-width: #{ round( 100% / $i * 10000 ) / 10000 }; flex: 0 0 #{ round( 100% / $i * 10000 ) / 10000 }; }
			}
		}
	}
}
@mixin col-css($breakpoint: '') {
	@if ( $breakpoint == '' ) {
		@for $i from 1 through 12 {
			@if use(col-#{$i}) {
				.col-#{$i} { max-width: #{ round(100% / 12 * $i * 10000) / 10000 }; flex: 0 0 #{ round(100% / 12 * $i * 10000) / 10000 }; }
			}
		}
	} @else {
		@for $i from 1 through 12 {
			@if use(col-#{$breakpoint + '-' + $i}) {
				.col-#{$breakpoint + '-' + $i} { max-width: #{ round(100% / 12 * $i * 10000) / 10000 }; flex: 0 0 #{ round(100% / 12 * $i * 10000) / 10000 }; }
			}
		}
	}
}

/**
 * 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: #222;
		}
	}
	&.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;
}

@function font-size( $size ) {
	@return calc( #{ $size } * var(--rio-typo-ratio, 1) );
}