@charset "UTF-8";

@mixin user-select($select) {
  -webkit-user-select: $select;
  -moz-user-select: $select;
  -ms-user-select: $select;
  user-select: $select;
}
@mixin vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@mixin clearfix($extend: true) {
  @if ($extend) {
    @extend %clearfix;
  } @else {
    &:after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      clear: both;
    }
  }
}
%clearfix {
  @include clearfix(false);
}

%text-overflow {
  overflow: hidden;
  white-space: nowrap;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}
@mixin center-block($extend: true) {
  @if $extend {
      @extend %center-block;
  }
  @else {
      margin-left: auto;
      margin-right: auto;
  }
}

%center-block {
  @include center-block(false);
}
%vertical-align {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
@mixin word-break($extend: true) {
  @if $extend {
      @extend %word-break;
  }
  @else {
      white-space: normal;
      word-wrap: break-word;
      word-break: break-all;
  }
}

%word-break {
  @include word-break(false);
}
@mixin placeholder {
  &::-webkit-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
}

@mixin square($value) {
  width: $value;
  height: $value;
}
@mixin v-arrow($direction: right, $borderWidth: 2px, $size: 10px) {
  display: inline-block;
  vertical-align: middle;
  width: $size;
  height: $size;
  @if $direction == top {
    border-top: $borderWidth solid currentColor;
    border-right: $borderWidth solid currentColor;
    transform: rotate(-45deg);
  } @else if $direction == right {
    border-top: $borderWidth solid currentColor;
    border-right: $borderWidth solid currentColor;
    transform: rotate(45deg);
  } @else if $direction == bottom {
    border-left: $borderWidth solid currentColor;
    border-bottom: $borderWidth solid currentColor;
    transform: rotate(-45deg);
  }
  @if $direction == left {
    border-left: $borderWidth solid currentColor;
    border-bottom: $borderWidth solid currentColor;
    transform: rotate(45deg);
  }
}

@mixin triangle($direction, $size, $borderColor) {
  content: '';
  width: 0;
  height: 0;
  @if ($direction == top) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $borderColor;
  } @else if ($direction == bottom) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-top: $size solid $borderColor;
  } @else if ($direction == left) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-right: $size solid $borderColor;
  } @else if ($direction == right) {
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: $size solid $borderColor;
  }
}

@mixin circle($value) {
  @include square($value);
  border-radius: 50%;
}

@mixin full-bg-img($url, $position-x: center, $position-y: center) {
  background: url($url) no-repeat $position-x $position-y;
  background-size: 100% 100%;
}

@mixin full-width-bg-img($url, $position-x: center, $position-y: center) {
  background: url($url) no-repeat $position-x $position-y;
  background-size: 100% auto;
}

@mixin full-height-bg-img($url, $position-x: center, $position-y: center) {
  background: url($url) no-repeat $position-x $position-y;
  background-size: auto 100%;
}