// 用于编写适用于整个项目的CSS方法
@mixin compatible($key, $word){
  #{$key}: $word;
  -webkit-#{$key}: $word;
  -moz-#{$key}: $word;
  -o-#{$key}: $word;
  -ms-#{$key}: $word;
}

@mixin transform($content) {
  transform: $content;
}

/* 混入CSS3代码 例如要width: 100% - 60px只需要 @include calc(width, "100% - 60px") */
//@mixin calc($property, $expression) {
//  #{$property}: -webkit-calc(#{$expression});
//  #{$property}: -moz-calc(#{$expression});
//  #{$property}: calc(#{$expression});
//}
// 宽度计算 @include wcalc(calc(100% * 2 /3 - 6rem))

@mixin wcalc($exp) {
  width: -moz-$exp;
  width: -webkit-$exp;
  width: $exp;
}

// 高度度计算 @include hcalc(calc(100% * 2 /3 - 6rem))
@mixin hcalc($exp) {
  height: -moz-$exp;
  height: -webkit-$exp;
  height: $exp;
}

// 左上角和右上角圆角属性
@mixin borderRadiusTop($value){
  border-top-left-radius: $value;
  border-top-right-radius: $value;
}

// 左下角和右下角圆角属性
@mixin borderRadiusBottom($value){
  border-bottom-left-radius: $value;
  border-bottom-right-radius: $value;
}

// 左上角和左下角圆角属性
@mixin borderRadiusLeft($value) {
  border-top-left-radius: $value;
  border-bottom-left-radius: $value;
}

// 右上角和右下角圆角属性
@mixin borderRadiusRight($value){
  border-top-right-radius: $value;
  border-bottom-right-radius: $value;
}

// 1. 布局方式
// 三种居中方式样式
@mixin centerInParent() {
  top: 50%;
  left: 50%;
  position: absolute!important;
  transform: translate(-50%, -50%);
}

@mixin centerVertical() {
  top: 50%;
  position: absolute!important;
  transform: translateY(-50%);
}

@mixin centerHorizontal() {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

// 全覆盖样式: 请勿将absolute修改为relative
@mixin block() {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

@mixin hxColor($bgColor, $color: white) {
  background-color: $bgColor;
  color: $color;
  &:hover {
    filter: brightness(95%);
  }
  &:active {
    filter: brightness(84%);
  }
}

@mixin hxButton($bgColor, $color: white, $height:34px) {
  height: $height;
  padding: 0 10px;
  background-color: $bgColor;
  font: {
    weight: 400;
    size: 14px;
  }
  color: $color;
  border: 1px solid $bgColor;
  border-radius: 4px;
  transition: all .4s;
  &.sub {
    box-shadow: none;
    color: $color;
  }
  &:hover {
    filter: brightness(95%);
  }
  &:active {
    filter: brightness(84%);
  }
}

@mixin hxTag($bgColor, $color: white, $height: 34px) {
  height: $height;
  padding: 0 8px;
  background-color: $bgColor;
  font: {
    weight: 400;
    size: 13px;
  }
  color: $color;
  border: 1px solid $bgColor;
  transition: all .4s;
  &.sub {
    box-shadow: none;
    color: $color;
  }
}

@mixin boxShadowNormal($isHover: true) {
  transition: box-shadow .4s;
  box-shadow: 0 3px 10px -5px rgba(0,0,0, .2);
  @if ($isHover) {
    &:hover {
      box-shadow: 0 8px 20px -5px rgba(0,0,0, .2);
    }
  }
}

@mixin hxBlankButton($bgColor, $color: white, $height:34px) {
  border: 1px solid $bgColor;
  background-color: $color;
  color: $bgColor;
  transition: all .4s;
  height: $height;
  padding: 0 8px;
  font-size: 14px;
  border-radius: 4px;
  &:hover{
    color: $color;
    background-color: $bgColor;
  }
}

@mixin hxTextButton($color: white, $height:34px) {
  border: none;
  color: $color;
  transition: all .4s;
  height: $height;
  padding: 0 8px;
  font-size: 14px;
  background-color: transparent;
  &:hover{
    color: darken($color, 5%);
    background-color: $color-gray-light!important;
    filter: brightness(100%);
  }
}

@mixin hxBlankTag($bgColor, $color: white, $height:34px) {
  border: 1px solid $bgColor;
  background-color: $color;
  color: $bgColor;
  height: $height;
  padding: 0 8px;
  font-size: 14px;
}

// 【常用】文本居于一行  超过范围变成 "XXXXX..."
@mixin nowrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// CSS过滤器集合：
// 模糊效果， 默认模糊度 10px
@mixin filter-blur($degree: 10px) {
  -webkit-filter: blur($degree); /* Chrome, Opera */
  filter: blur($degree);
}

// 3. 图片类型
// 乘号
@mixin timesIcon($bgColor: #eee) {
  position: relative;
  &:before, &:after {
    content: "";
    background-color: $bgColor;
    height: 60%;
    margin: 0 auto;
    display: inline-block;
    width: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  &:before {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  &:after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
// 加载图片
@mixin loading($height: 100%, $width: 100%, $top: 0, $left: 0) {
  &:before, &:after {
    content: '';
    background-color: rgba(255,255,255,.5);
    height: $height;
    width: $width;
    display: block;
    position: absolute;
    border-radius: 50%;
  }
  &:before {
    left: $left;
    top: $top;
    transform: scale(0.2, 0.2);
    animation: smallRound 1.5s infinite ease-out;
  }
  &:after {
    left: $left;
    top: $top;
    transform: scale(1.0, 1.0);
    animation: bigRound 1.5s infinite ease-in;
  }
}