/*  辅助类
   ========================================================================== */
// 浏览器默认样式处理
// 去掉外线
.no-outline {
  outline: none;
  &:focus {
    outline: none;
  }
}

// 对其
.vam {
  display: inline-block;
  vertical-align: middle;
}
.vat {
  display: inline-block;
  vertical-align: top;
}
.vab {
  display: inline-block;
  vertical-align: bottom;
}

// 文本对其
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-justify {
  text-align: justify;
}
.text-nowrap {
  white-space: nowrap;
}

// 浮动
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix {
  @include clearfix;
}

// 块
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}

// 禁用样式
[disabled] {
  opacity: 0.5;
  &.mask {
    position: relative;
    &:after {
      content: ' ';
      position: absolute;
      width: 100%;height: 100%;left: 0;top: 0;
      cursor: no-drop;
      z-index: 99;
    }
  }
}
// Z-levels
.z-d0 {
  box-shadow: none !important;
}
.z-d1 {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
}
.z-d1-half {
  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2);
}
.z-d2 {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.z-d3 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3);
}
.z-d4 {
  box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.3);
}
.z-d5 {
  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
}

// 三角形
.caret {
  @include angle3('bottom',5px,#000);
  transition: all 0.2s;
}

// 关闭按钮
.close {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 20px;
  &:before,&:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 20px;
    height: 1px;
    background-color: currentColor;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
  }
  &:after {
    transform: rotate(-45deg);
  }
}

// label的input组 如checkbox radio
.label-inp-group {
  //position: relative;
  display: inline-block;
  //overflow: hidden;
  @include user-select(none);
  .__input {
    display: none;
  }
  .__label-group {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }
  .__icon,.__label {
    display: inline-block;
    vertical-align: middle;
  }
  .__icon {
    position: relative;
    &:before {
      position: absolute;
      content: ' ';
      left: 50%;top: 50%;
    }
  }
}