@use 'sass:map';
@use 'sass:math';
@use 'sass:color';

@use 'function'as *;
@use '../common/var'as *;

@forward 'function';
@forward 'config';

/* Val Mixins */

@mixin res($key, $map: $breakpoints) {

  // loop breakpoint Map, return if present
  @if map-has-key($map, $key) {
    @media only screen and #{unquote(map-get($map, $key))} {
      @content;
    }
  }

  @else {
    @warn "Undefined points: `#{$map}`";
  }
}


@mixin set-css-val-type($list) {
  @each $item in $list {
    $color: map.get($colors, $item, 'base');
    @include set-color-val($item, $color);
  }
}

@mixin set-css-val($name, $value) {
  #{joinValName($name)}: #{$value};
}

@mixin set-color-val($name, $value) {
  /* Color - #{$name} */
  $nameType: color, $name;
  #{joinValName($nameType)}-lightest: #{mix(lighten($value, 30), #FFF)};
  #{joinValName($nameType)}-lighter: #{mix(lighten($value, 20), #FFF)};
  #{joinValName($nameType)}-light: lighten($value, 20);
  #{joinValName($nameType)}: #{$value};
  #{joinValName($nameType)}-dark: #{darken($value, 10)};
  #{joinValName($nameType)}-darker: #{darken($value, 20)};
  #{joinValName($nameType)}-darkest: #{darken($value, 30)};
}

@mixin set-neutral-color-val($n) {
  /* Color - Neutral */
  $min: 0;
  $max: $n;
  @for $i from $min through $max {
    $nameType: color, neutral, $i;
    $color: color.adjust(map.get($colors, 'primary', 'base'), $blackness: 71%);
    $p: math.div(color.blackness($color), $max - 1);
    $value: lighten($color, ($max - $i) * $p);
    #{joinValName($nameType)}: #{$value};
  }
}

@mixin set-css-val-space($list) {
  @each $item in $list {
    $s: map.get($space, $item);
    $name: space, $item;
    #{joinValName($name)}: $s;
  }
}


/* Class Mixins */
@mixin set-space-class($list) {
  $spaceStyle: padding, margin;

  @each $space in $list {

    /* Space #{$space} */
    @each $spaceType in $spaceStyle {
      $className: getClassName($spaceType);
      $name: space, $space;
      $var: getValName($name);

      #{$className}-#{$space} {
        #{$spaceType}: #{$var};
      }

      #{$className}-x-#{$space} {
        #{$spaceType}-left: #{$var};
        #{$spaceType}-right: #{$var};
      }

      #{$className}-y-#{$space} {
        #{$spaceType}-top: #{$var};
        #{$spaceType}-bottom: #{$var};
      }

      #{$className}-left-#{$space} {
        #{$spaceType}-left: #{$var};
      }

      #{$className}-top-#{$space} {
        #{$spaceType}-top: #{$var};
      }

      #{$className}-right-#{$space} {
        #{$spaceType}-right: #{$var};
      }

      #{$className}-bottom-#{$space} {
        #{$spaceType}-bottom: #{$var};
      }
    }
  }
}

@mixin set-color-class($list) {
  @each $item in $list {
    /* Color #{$item} */
    $var: getValName((color, $item));

    #{getClassName((background, $item))} {
      background-color:#{$var};
    }
    #{getClassName((background, $item, 'lightest'))} {
      background-color:#{getValName((color, $item, 'lightest'))};
    }
    #{getClassName((background, $item, 'lighter'))} {
      background-color:#{getValName((color, $item, 'lighter'))};
    }
    #{getClassName((background, $item, 'light'))} {
      background-color:#{getValName((color, $item, 'light'))};
    }
    #{getClassName((background, $item, 'dark'))} {
      background-color:#{getValName((color, $item, 'dark'))};
    }
    #{getClassName((background, $item, 'darker'))} {
      background-color:#{getValName((color, $item, 'darker'))};
    }
    #{getClassName((background, $item, 'darkest'))} {
      background-color:#{getValName((color, $item, 'darkest'))};
    }
    #{getClassName((text, $item))} {
      color:#{$var};
    }
    #{getClassName((text, $item, 'lightest'))} {
      color:#{getValName((color, $item, 'lightest'))};
    }
    #{getClassName((text, $item, 'lighter'))} {
      color:#{getValName((color, $item, 'lighter'))};
    }
    #{getClassName((text, $item, 'light'))} {
      color:#{getValName((color, $item, 'light'))};
    }
    #{getClassName((text, $item, 'dark'))} {
      color:#{getValName((color, $item, 'dark'))};
    }
    #{getClassName((text, $item, 'darker'))} {
      color:#{getValName((color, $item, 'darker'))};
    }
    #{getClassName((text, $item, 'darkest'))} {
      color:#{getValName((color, $item, 'darkest'))};
    }
  }
}

@mixin col-size($size) {
  @include res($size) {
    #{getClassName((col, $size, 0))} {
      display: none;
      // @include when(guttered) {
      //   display: none;
      // }
    }
    @for $i from 0 through 24 {
      #{getClassName((col, $size, $i))} {
        @if $i != 0 {
          display: block;
        }
        max-width: (math.div(1, 24) * $i * 100) * 1%;
        flex: 0 0 (math.div(1, 24) * $i * 100) * 1%;
      }

      #{getClassName((col, $size, offset, $i))} {
        margin-left: (math.div(1, 24) * $i * 100) * 1%;
      }

      #{getClassName((col, $size, pull, $i))} {
        position: relative;
        right: (math.div(1, 24) * $i * 100) * 1%;
      }

      #{getClassName((col, $size, push, $i))} {
        position: relative;
        left: (math.div(1, 24) * $i * 100) * 1%;
      }
    }
  }
}

@mixin set-css-val($key, $map) {
  $list: map.keys($map);
  @each $item in $list {
    #{joinValName(($key, $item))}: #{getValName(map.get($map, $item))};
  }
}

@mixin set-popper-card() {
  min-width: 100px;
  overflow: hidden;
  border-radius: #{getValName((border, radius, base))};
  background-color: #{getValName((color, neutral, 0))};
  border: solid 1px #{getValName((color, neutral, 2))};
  padding: #{getValName((space, xs))} 0;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.12);
  z-index: 2001;
  transition: .5s opacity;
  // font-size: #{getValName((heading8))};
  &.card-fade-enter-from {
    opacity: 0;
  }
  &.card-fade-leave-to {
    opacity: 0;
    transition: .2s opacity;
  }
}