@mixin ie11 {
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    & {
      @content
    }
  }
};

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

@mixin vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin absolute-center {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}

@mixin ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin utils-vertical-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle
    }
  }
}

@mixin default-webkit-scrollbar {
  ::-webkit-scrollbar {
    height: 8px;
  }
}

@mixin flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin fill{
  width: 100%;
  height: 100%;
}

@mixin ab-pos($left,$top){
  position: absolute;
  left: $left;
  top: $top;
}

@mixin ab-pos($left, $top, $right: null, $bottom: null) {
  position: absolute;
  left: $left;
  top: $top;
  @if $right != null {
    right: $right;
  }
  @if $bottom != null {
    bottom: $bottom;
  }
}

@mixin flex-center($layout) {
  display: flex;
  align-items: center;
  @if $layout == start {
    justify-content:flex-start;
  } @else if $layout == end {
    justify-content: flex-end;
  } @else if $layout == btw {
    justify-content: space-between;
  } @else if $layout == ad {
    justify-content: space-around;
  } @else if $layout == eve {
    justify-content: space-evenly;
  } @else {
    justify-content: center;
  }
}

@mixin main-bg{
  // background-image: url('~common/guotu-img/box/side-dark.png');
  background-size: 101% 101%;
  background-position: -1px -1px;
  background-repeat: no-repeat;
  border-radius: 5px;
  border: 2px solid #6E674E;
}

@mixin box-active-bg{
  // background-image: url('~common/guotu-img/default/box-active-bg.png');
  background-color: #3e3e3e8a;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 7px;
}

// 弹框的标题高亮
@mixin pop-active-title{
  // background-image: url('~common/guotu-img/light/active-normal.png');
  background-repeat: no-repeat;
  background-position: 50% 145%;
  @include flex-center(center);
}

// 弹窗的标题文字阴影
@mixin pop-title{
  font-size: 14px;
  color: #fff;
  text-shadow: 0px 1px 4px #dcd277;
}

// 弹窗背景
@mixin box-bg{
  // background-image: url('@/assets/guotu-img/default/box-bg.png');
  background-color: #3e3e3e8a;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 7px;
}

@mixin scale($scale){
  scale: $scale;
  transform-origin: center center;
}

@mixin miss-scroll{
  overflow: auto;
  &::-webkit-scrollbar{
    display: none;
  }
}

@mixin btn-confirm{
  // background: url("~common/guotu-img/box/horn/btn-horn.png") no-repeat 0 0 / 100% 100%,
  // url("~common/guotu-img/light/btn-confirm.png") no-repeat 0 0 / 100% 100%;
  @include flex-center(center);
  background-color: rgb(52 49 32 / 36%);
  font-size: 12px;
  border-radius: 4px;
}

// 地图打点弹窗的工具栏按钮
@mixin pop-tool-box{
  width: 25px;
  height: 25px;
  @include flex-center(center);
}

// 地图打点弹窗的工具栏按钮-点亮
@mixin pop-tool-box-active{
  // background-image: url("~common/guotu-img/box/tool-height.png");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}