@import "function";

/* Break-points
 -------------------------- */

$--sm: 768px !default;
$--md: 992px !default;
$--lg: 1200px !default;
$--xl: 1920px !default;

$--breakpoints: (
        'xs' : (max-width: $--sm - 1),
        'sm' : (min-width: $--sm),
        'md' : (min-width: $--md),
        'lg' : (min-width: $--lg),
        'xl' : (min-width: $--xl)
);

$--breakpoints-spec: (
        'xs-only' : (max-width: $--sm - 1),
        'sm-and-up' : (min-width: $--sm),
        'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
        'sm-and-down': (max-width: $--md - 1),
        'md-and-up' : (min-width: $--md),
        'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
        'md-and-down': (max-width: $--lg - 1),
        'lg-and-up' : (min-width: $--lg),
        'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
        'lg-and-down': (max-width: $--xl - 1),
        'xl-only' : (min-width: $--xl),
);

@mixin res($key, $map: $--breakpoints) {
  // 循环断点Map，如果存在则返回
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}

/* Scrollbar
 -------------------------- */
@mixin scroll-bar($width:8px, $color:rgba(0, 0, 0, .3)) {
  &::-webkit-scrollbar {
    width: $width;

    &:horizontal {
      height: $width;
    }

    &-thumb {
      border-radius: $width/2;
      background-color: $color;
    }

    &-track {
      background-color: transparent;

    }
  }
}

/* Placeholder
 -------------------------- */
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content
  }

  &::-moz-placeholder {
    @content
  }

  &:-ms-input-placeholder {
    @content
  }
}

/* BEM
 -------------------------- */
@mixin b($block) {
  $B: $namespace+'-'+$block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  $E: $element !global;
  $selector: &;
  $currentSelector: "";
  @each $unit in $element {
    $currentSelector: #{$currentSelector + "." + $B + $element-separator + $unit + ","};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin m($modifier) {
  $selector: &;
  $currentSelector: "";
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ","};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin configurable-m($modifier, $E-flag: false) {
  $selector: &;
  $interpolation: '';

  @if $E-flag {
    $interpolation: $element-separator + $E-flag;
  }

  @at-root {
    #{$selector} {
      .#{$B+$interpolation+$modifier-separator+$modifier} {
        @content;
      }
    }
  }
}

@mixin spec-selector($specSelector: '', $element: $E, $modifier: false, $block: $B) {
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{&}#{$specSelector}.#{$block+$element-separator+$element+$modifierCombo} {
      @content
    }
  }
}

@mixin meb($modifier: false, $element: $E, $block: $B) {
  $selector: &;
  $modifierCombo: '';

  @if $modifier {
    $modifierCombo: $modifier-separator + $modifier;
  }

  @at-root {
    #{$selector} {
      .#{$block+$element-separator+$element+$modifierCombo} {
        @content
      }
    }
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

@mixin extend-rule($name) {
  @extend #{'%shared-'+$name};
}

@mixin share-rule($name) {
  $rule-name: '%shared-'+$name;

  @at-root #{$rule-name} {
    @content
  }
}

@mixin pseudo($pseudo) {
  @at-root #{&}#{':#{$pseudo}'} {
    @content
  }
}