$resolution : 2,3,4,5,6;
@function var-color-value ($value) {
  $result: $value;
  @each $key, $val in $colors {
    @if $value == $val{
       $result: var(--vx-#{$key}, $val);
    }
  }
  @return $result;
}
@mixin var-color ($value: $--color-primary, $attr: 'color') {
  #{$attr}: $value;
  #{$attr}: var-color-value($value);
}
@mixin var-background-color ($value: $--color-primary) {
  @include var-color($value, 'background-color');
}
@mixin var-border-color ($value: $--color-primary, $attr: 'border-color') {
  @include var-color($value, $attr);
}
@mixin var-font-size ($value: $--font-size-default) {
  font-size: $value;
  @each $key, $val in $font-sizes {
    @if $value == $val{
      font-size: var(--vx-#{$key}, $val);
    }
  }
}
@mixin var-height ($value: $--box-size-height-default, $attr: 'height') {
  #{$attr}: $value;
  @each $key, $val in $box-size-heights {
    @if $value == $val{
      #{$attr}: var(--vx-#{$key}, $val);
    }
  }
}
@mixin var-border-radius ($value: $--border-radius, $resolution: false) {
  @if $value {
    border-radius: $value;
    @if $value != 0 {
      @if $value == $--border-radius{
        border-radius: var(--vx-border-radius, $value);
        @if $resolution == true {
          @each $key, $val in $--border-radius-dprs {
            @media screen and (resolution: #{$key}dppx) {
              border-radius: var(--vx-border-radius-dpr#{$key}, $--border-radius*$key);
            }
          }
        }@else if $resolution{
          @media screen and (resolution: #{$resolution}dppx) {
            border-radius: var(--vx-border-radius-dpr#{$resolution}, $--border-radius*$resolution);
          }
        }
      }
    }
  }
}
@mixin disabled{
  &.is-disabled{
    @include _disabled;
    @content;
  }
}
@mixin _disabled{
  opacity:0.55;
  pointer-events: none;
}
@mixin active{
  &:active{
    @include var-background-color($--color-touch-active);
  }
}
@mixin button{
  border:0;
  outline:none;
  background-color:transparent;
  -webkit-appearance: none;
  appearance: none;
  text-align:center;
  user-select:none;
  box-shadow: none;
  font-size: inherit;
  box-sizing: border-box;
  color:inherit;
  vertical-align: middle;
}
@mixin input{
  border:0;
  outline:none;
  background-color:transparent;
  text-align:inherit;
  box-sizing:border-box;
  height:2.6rem;
  width:100%;
  color:inherit;
  vertical-align: middle;
}
@mixin scroller{
  overflow: auto;
  -webkit-overflow-scrolling: touch; 
  overflow-scrolling: touch;
}
@mixin scroller2($color: #ccc,$width: 4px){
  &::-webkit-scrollbar{  
    width: $width;
    height:$width;
  }  
  &::-webkit-scrollbar-track{
    background-color:transparent;
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color:$color;
  }
  &:hover::-webkit-scrollbar-thumb{
    background-color:$color;
  }
}

@mixin divider ($color:$--color-divider, $vertical: false){
  @if $vertical {
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: left;
    background-image: linear-gradient(90deg,$color,$color 50%,transparent 100%);
    @if $color == $--color-primary {
      background-image: linear-gradient(90deg,var(--vx-color-primary,$color),var(--vx-color-primary,$color) 50%,transparent 100%);
    }
    @if $color == $--color-divider {
      background-image: linear-gradient(90deg,var(--vx-color-divider,$color),var(--vx-color-divider,$color) 50%,transparent 100%);
    }
  }@else{
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: top;
    background-image: linear-gradient(180deg,$color,$color 50%,transparent 0);
    @if $color == $--color-primary {
      background-image: linear-gradient(180deg,var(--vx-color-primary,$color),var(--vx-color-primary,$color) 50%,transparent 0);
    }
    @if $color == $--color-divider {
      background-image: linear-gradient(180deg,var(--vx-color-divider,$color),var(--vx-color-divider,$color) 50%,transparent 0);
    }
  }
}

@mixin arrow($rotate:45deg,$color: rgba(153, 153, 153, 0.6)){
  content:'';
  display:inline-block;
  width:0.16rem;
  position:absolute;
  top:50%;
  right:0.08rem;
  height:0.16rem;
  margin-top:-2px;
  border-top:1px solid $color;
  border-right:1px solid $color;
  transform:rotate($rotate) translateY(-50%);
}
@mixin var-border-round($color: $--color-border,$radius: $--border-radius,$resolution:1) {
  $var : 3%;
  @media screen and (if($resolution == 6,-webkit-min-device-pixel-ratio,-webkit-device-pixel-ratio) : $resolution) {
    @if $color == $--color-border {
      border-color:darken($color,$resolution*$var);
    } @else {
      @include var-border-color($color);
    }
    width:$resolution*100%;
    height:$resolution*100%;
    transform:scale(1/$resolution);
    @include var-border-radius($resolution*$radius, $resolution);
    left:-$resolution/2*100+50%;
    top:-$resolution/2*100+50%;
  }
  @media screen and (if($resolution == 6,min-resolution,resolution): $resolution*1dppx) {
    @if $color == $--color-border {
      border-color:darken($color,$resolution*$var);
    } @else {
      @include var-border-color($color);
    }
    width:$resolution*100%;
    height:$resolution*100%;
    transform:scale(1/$resolution);
    @include var-border-radius($resolution*$radius, $resolution);
    left:-$resolution/2*100+50%;
    top:-$resolution/2*100+50%;
  }
}
@mixin border-round($color: $--color-border,$radius: $--border-radius) {
  position:relative;
  &:before{
    border:1px solid;
    @include var-border-color($color);
    box-sizing:border-box;
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    content:'';
    @include var-border-radius($radius);
    @each $item in 2,3,4,5,6 {
      @include var-border-round($color,$radius,$item);
    }
  }
}
@mixin placeholder{
  &:empty{
    &:before{
      content: attr(data-placeholder);
      color:$--color-light;
    }
  }
}
@mixin lineClamp($clamp:1){
  @if $clamp > 1 {
    -webkit-line-clamp:$clamp;
    line-clamp:$clamp;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  } @else {
    white-space:nowrap;
  }
  overflow:hidden;
  text-overflow:ellipsis;
  word-break: break-all;
}
@mixin overlay{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
@mixin flexbox($align: 'normal', $direction: 'normal'){
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  @if $align == 'center' {
    -ms-flex-align: center;
    -moz-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
  }
  @if $direction == 'column' {
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
  }
}
@mixin flexbox-item{
  -ms-flex: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -moz-flex: 1;
  flex: 1;
  min-width:0;
}
@mixin _flexbox($selector1: '.vx-flexbox', $selector2: '.vx-flexbox--item') {
  #{selector1}{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
  }
  #{selector2} {
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
    min-width:0;
    &:first-child{
      margin-left:0!important
    }
    &:last-child{
      margin-right:0!important
    }
  }
  #{selector2} + #{selector2}{
    margin-left: 0!important
  }
}