@mixin ts($duration: 0.2s, $target: all) {
  transition: $target $duration;
  -ms-transition: $target $duration;
  -moz-transition: $target $duration;
  -webkit-transition: $target $duration;
}

@mixin tf_ps($x: 0, $y: 0) {
  -ms-transform: translate($x, $y);
  -webkit-transform: translate($x, $y);
  transform: translate($x, $y);
}

@mixin tf_ro($deg: 0) {
  -ms-transform: rotate($deg);
  -webkit-transform: rotate($deg);
  transform: rotate($deg);
}

@mixin tf_roy($deg: 0) {
  -ms-transform: rotateY($deg);
  -webkit-transform: rotateY($deg);
  transform: rotateY($deg);
}

@mixin tf_roy_sc($deg: 0, $scale: 1) {
  -ms-transform: rotateY($deg) sclae($scale);
  -webkit-transform: rotateY($deg) scale($scale);
  transform: rotateY($deg) scale($scale);
}

@mixin tf_sc($scale: 1) {
  -ms-transform: scale($scale);
  -webkit-transform: scale($scale);
  transform: scale($scale);
}

@mixin tf_scxy($scale_x: 1, $scale_y: 1) {
  -ms-transform: scale($scale_x, $scale_y);
  -webkit-transform: scale($scale_x, $scale_y);
  transform: scale($scale_x, $scale_y);
  -moz-transform: scale($scale_x, $scale_y);
}

@mixin tf_ps_ro($x: 0, $y: 0, $deg: 0) {
  transform: translate($x, $y) rotate($deg);
  -ms-transform: translate($x, $y) rotate($deg);
  -moz-transform: translate($x, $y) rotate($deg);
  -webkit-transform: translate($x, $y) rotate($deg);
}

@mixin tf_ps_ro_sc($x: 0, $y: 0, $deg: 0, $scale: 1) {
  transform: translate($x, $y) rotate($deg) scale($scale);
  -ms-transform: translate($x, $y) rotate($deg) scale($scale);
  -moz-transform: translate($x, $y) rotate($deg) scale($scale);
  -webkit-transform: translate($x, $y) rotate($deg) scale($scale);
}

@mixin tf_ps_sc($x: 0, $y: 0, $scale: 1) {
  transform: translate($x, $y) scale($scale);
  -ms-transform: translate($x, $y) scale($scale);
  -moz-transform: translate($x, $y) scale($scale);
  -webkit-transform: translate($x, $y) scale($scale);
}

@mixin tf_ps_scxy($x: 0, $y: 0, $scale_x: 1, $scale_y: 1) {
  transform: translate($x, $y) scale($scale_x, $scale_y);
  -ms-transform: translate($x, $y) scale($scale_x, $scale_y);
  -moz-transform: translate($x, $y) scale($scale_x, $scale_y);
  -webkit-transform: translate($x, $y) scale($scale_x, $scale_y);
}

@mixin tf_ori($x: 0, $y: 0) {
  -webkit-transform-origin: $x $y;
  transform-origin: $x $y;
}

@mixin text_ellipsis($lines: 1) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

@mixin text_select($bgcolor: #5496b1, $textcolor: #ffffff) {
  &::selection {
    background: $bgcolor;
    color: $textcolor;
    /* WebKit/Blink Browsers */
  }
  &::-moz-selection {
    background: $bgcolor;
    color: $textcolor;
    /* Gecko Browsers */
  }
}

@mixin div_img {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

@mixin inline_flex() {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: -webkit-inline-flex;
  display: inline-flex;
}

@mixin flex() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@mixin flex_align($align: center) {
  -webkit-box-align: $align;
  -moz-box-align: $align;
  -ms-flex-align: $align;
  -webkit-align-items: $align;
  align-items: $align;
}

@mixin flex_justify($align: center) {
  -webkit-justify-content: $align;
  justify-content: $align;
}

@mixin flex_center() {
  @include flex;
  @include flex_align;
  @include flex_justify;
}

@mixin remove_blue_cover() {
  outline: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@mixin scroll_smooth() {
  -webkit-overflow-scrolling: touch;
}

@mixin no_select() {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin no_drag() {
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

@mixin auto_margin_top($distance) {
  margin-top: $distance;
  &:nth-child(1) {
    margin-top: 0;
  }
}

@mixin auto_margin_left($distance) {
  margin-left: $distance;
  &:nth-child(1) {
    margin-left: 0;
  }
}

@mixin auto_margin_right($distance) {
  margin-right: $distance;
  &:nth-child(1) {
    margin-right: 0;
  }
}

@mixin clip_circle($radius: 100%, $x: 50%, $y: 100%) {
  clip-path: circle($radius at $x $y);
  -webkit-clip-path: circle($radius at $x $y);
}

@mixin abo_0($index: 0) {
  position: absolute;
  z-index: $index;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@mixin fix_0($index: 0) {
  position: fixed;
  z-index: $index;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@mixin active_visiable() {
  @include ts_FS;
  visibility: hidden;
  opacity: 0;
  &.active {
    visibility: visible;
    opacity: 1;
  }
}