@import './z-index.scss';

// flex 通用样式
@mixin flex($flex-direction: row, $jc: flex-start, $alignItems: center) {
  display: flex;
  flex-direction: $flex-direction;
  justify-content: $jc;
  align-items: $alignItems;
}

%ellipsis {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin ellipsis() {
  word-wrap: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin disable-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}

%disable-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}

// animation
@mixin blink($name: blink, $from: 0.5, $to: 1) {
  @keyframes #{$name} {
    0% {
      transform: scale($from);
    }
    100% {
      transform: scale($to);
    }
  }
}

@mixin hairlineBorder(
  $radius: 0,
  $borderWidth: 1rpx,
  $borderColor: transparent,
  $borderStyle: solid
) {
  position: relative;

  $width: calc(200% - #{$borderWidth} * 4);

  &:after {
    position: absolute;
    transform: scale(0.5);
    content: '';
    top: -50%;
    left: -50%;
    width: $width;
    height: $width;
    border-width: calc(#{$borderWidth} * 2);
    border-style: $borderStyle;
    border-color: $borderColor;
    border-radius: $radius;
  }
}

@mixin hairlineBorderColor($color: transparentize()) {
  &:after {
    border-color: $color;
  }
}

@mixin disableTapHighlight {
  -webkit-tap-highlight-color: transparent;
}

// 禁止滚动触底传递
@mixin limitedOverScroll() {
  overscroll-behavior: contain;
}

@mixin safeArea($propName: height, $offset: 0px) {
  #{$propName}: calc(constant(safe-area-inset-bottom) + #{$offset});
  #{$propName}: calc(env(safe-area-inset-bottom) + #{$offset});
}