// =====================================
/*
// SASS mixins for ReactCSSTransitionGroup
// https://facebook.github.io/react/docs/animation.html

//
//.transition-name {
//  @include react-animation-enter{
//    transition: all 0.4s;
//    @include react-animation-from{
//      opacity: 0;
//      transform: translate(-50%, -50%) scale(0.7);
//    }
//    @include react-animation-to(){
//      opacity: 1;
//      transform: translate(-50%, -50%) scale(1);
//    }
//  }
//  @include react-animation-leave{
//    transition: all 0.4s;
//    @include react-animation-from{
//      opacity: 1;
//      transform: translate(-50%, -50%) scale(1);
//    }
//    @include react-animation-to(){
//      opacity: 0;
//      transform: translate(-50%, -50%) scale(0.7);
//    }
//  }
// }
*/

@mixin react-animation-enter {
  // .xxx-enter .xxx-enter-active
  &-enter {
    @content;
  }
}

@mixin react-animation-leave {
  // .xxx-leave .xxx-leave-active
  &-leave {
    @content;
  }
}

@mixin react-animation-from {
  @content;
}

@mixin react-animation-to {
  // .xxxxx
  &-active {
    @content;
  }
}

//  =====================================
@mixin xm-layout-full-view {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

@mixin text-gradient($fromColor,$toColor) {
  display: inline-block;
  color: $fromColor;
  background: linear-gradient(90deg, $fromColor 0%, $toColor 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

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

@mixin xm-nowrap() {
  white-space: nowrap;
  word-break: keep-all;
}

// 更多flex方法请参阅
// - secretWork/src/xmui/sass/base/utilities/bs4/_flex.scss
//
@mixin xm-flex-center($dirction:row) {
  flex-direction: $dirction;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@mixin xm-block-center() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin xm-absolute-center($horizon:true,$vertical:true) {
  position: absolute;
  @if $horizon and $vertical {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
  @if $horizon and not $vertical {
    left: 50%;
    transform: translateX(-50%);
  }
  @if not $horizon and $vertical {
    top: 50%;
    transform: translateY(-50%);
  }
}

// 带白点背景，$animate是否显示动画效果 （参考showcase的dark风格）
@mixin xm-dot-bg($animate:false) {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAQAAAD8x0bcAAAAFklEQVR4AWMgD4yC/3r/9chWRBiMAgAiugS1Cs8RuwAAAABJRU5ErkJggg==);
  background-size: rem(9px) rem(9px), auto;
  @if $animate {
    animation: showcase-dark-dot 0.5s linear infinite;
  }
}

// 生成实心圆
@mixin xm-circle-element($width,$color) {
  width: $width;
  height: $width;
  border-radius: 50%;
  background-color: $color;
}

@mixin xm-fixed-full {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

@mixin xm-set-fill-arrow($direction:top, $size:rem(10px) ,$color:$global-arrow-color,$class:after) {
  &:#{$class} {
    @if $direction == none {
      display: none;
    } @else {
      position: absolute;
      content: "";
      border-width: $size;
      border-style: solid;
      @if $direction==top {
        top: -$size;
        @include xm-absolute-center(true, false);
        border-color: transparent transparent $color transparent;
        border-top-width: 0;
      }
    }
  }
}

// 用于设置在iOS的熊猫app上一些样式
@mixin xm-ios-app-fix {
  .app-fix-style.ios-fix-style {
    @content;
  }
}

// 背景高斯模糊（毛玻璃）
// 要求:
// 1. 背景色必须有透明度,低于0.8才有显著效果，例如 background-color: rgba(255,255,255,0.8);
// 2. 必须是iOS
@mixin xm-bg-blur($px:10px) {
  backdrop-filter: blur($px);
}

@mixin xm-font-size($px) {
  @if $px<12px {
    font-size: rem(12px);
    transform: scale($px/12px);
  } @else {
    font-size: rem($px);
  }
}

@mixin xm-placeholder {
  &::placeholder{
    @content;
  }
  &::-webkit-input-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
}

@mixin xm-selection {
  &::selection {
    @content;
  }
  &::-moz-selection {
    @content;
  }
}