/* -------------------------------------------
	Alpus 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;
$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);
}
// # Check used component
@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);
}

/**
 * 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} {
          --alpus-col: #{$i};
        }
      }
    }
  } @else {
    @for $i from 1 through 8 {
      @if use(cols-#{$breakpoint + "-" + $i}) {
        .cols-#{$breakpoint + "-" + $i} {
          --alpus-col: #{$i};
        }
      }
    }
  }
}
@mixin col-css($breakpoint: "") {
  @if ($breakpoint == "") {
    @for $i from 1 through 12 {
      @if use(col-#{$i}) {
        .col-#{$i} {
          --alpus-col: #{round(12 / $i * 100000) / 100000};
        }
      }
    }
  } @else {
    @for $i from 1 through 12 {
      @if use(col-#{$breakpoint + "-" + $i}) {
        .col-#{$breakpoint + "-" + $i} {
          --alpus-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(--alpus-dark-color, $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;
}