@mixin font-init($fname, $fstyle, $fweight, $furl) {
  @font-face {
    font-family: $fname;
    font-style: $fstyle;
    font-weight: $fweight;
    font-display: swap;
    src: local($fname), url($furl) format("woff2");
  }
}

@mixin font($font-s, $font-h, $font-c) {
  font-size: $font-s;
  line-height: $font-h;
  color: $font-c;
}

@mixin counter($var) {
  counter-reset: $var;
  > li &:before {
    content: counter($var);
    counter-increment: $var;
  }
}

@mixin placeholder-color($color) {
  &:-moz-placeholder,
  &::-moz-placeholder {
    color: $color;
    opacity: 1;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
  &:-ms-input-placeholder {
    color: $color;
    opacity: 1;
  }
}

@mixin arr($width, $height, $bg, $direction) {
  width: 0px;
  height: 0px;
  border-style: solid;
  @if $direction == t {
    border-width: 0 $width / 2 + px $height + px $width / 2 + px;
    border-color: transparent transparent $bg transparent;
  }
  @if $direction == r {
    border-width: $height / 2 + px 0 $height / 2 + px $width + px;
    border-color: transparent transparent transparent $bg;
  }
  @if $direction == b {
    border-width: $height + px $width / 2 + px 0 $width / 2 + px;
    border-color: $bg transparent transparent transparent;
  }
  @if $direction == l {
    border-width: $height / 2 + px $width + px $height / 2 + px 0;
    border-color: transparent $bg transparent transparent;
  }
  @if $direction == tl {
    border-width: $height + px $width + px 0 0;
    border-color: $bg transparent transparent transparent;
  }
  @if $direction == tr {
    border-width: 0 $width + px $height + px 0;
    border-color: transparent $bg transparent transparent;
  }
  @if $direction == br {
    border-width: 0 0 $height + px $width + px;
    border-color: transparent transparent $bg transparent;
  }
  @if $direction == bl {
    border-width: $height + px 0 0 $width + px;
    border-color: transparent transparent transparent $bg;
  }
}
@mixin text-overflow {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}