@import "../root/mixins/mixins";

// =====================================
// text
@mixin ellipsis($w:auto) {
  width: $w;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

@mixin ellipsisLn($line) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}
@mixin text-wrap() {
  word-wrap:break-word;
  word-break:break-all;
}

// =====================================
// layout

@mixin default-row($padding:1rem) {
  position: relative;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left:$padding;
  padding-right:$padding ;
  font-size: 1rem;
  height: $default-row-height;
  line-height: $default-row-height;
}
@mixin cell-press-effect {
  &:active {
    background-color: $c-grey-light;
  }
}

@mixin xm-col {
  flex-basis: 0;
  flex-grow: 1;
}

// =====================================
// mobile

// tapcolor
@mixin set-tap-color($c:rgba(0,0,0,0)) {
  -webkit-tap-highlight-color: $c;
}

//user action
@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;
}

// =====================================
// general

@mixin set-arrow($direction:right, $size:1em ,$color:$global-arrow-color,$class:after) {
  &:#{$class} {
    @if $direction == none {
      display: none;
    } @else {
      font-family: 'iconfont-extend';
      display: inline-block;
      position: relative;
      color: $color;
      font-size: $size;
      line-height: inherit;
      @if $direction == top {
        content: '\e6b9';
        margin-left: .2em;
      }

      @if $direction == right {
        content: '\e6bf';
        margin-left: .2em;
      }

      @if $direction == down {
        content: '\e6c1';
        margin-left: .2em;
      }

      @if $direction == left {
        content: '\e66d';
      }
    }
  }
}

@mixin set-Checked($c:#FFFFFF) {
  display: inline-block;
  content: '';
  width: 4px;
  height: 8px;
  border-bottom: 2px solid $c;
  border-right: 2px solid $c;
  transform: translate(0, 0) rotate(45deg);
}

@mixin set-CheckedAbs($c:#FFFFFF) {
  position: absolute;
  top: 50%;
  left: 50%;
  content: '';
  width: 4px;
  height: 8px;
  border-bottom: 2px solid $c;
  border-right: 2px solid $c;
  transform: translate(-50%, -65%) rotate(45deg);
}

@mixin set-line($direction,$color: $global-border-color,$style:solid,$width:1px,$class:before,$left:0) {
  position: relative;
  &::#{$class} {
    @if $direction == none {
      display: none;
    } @else {
      content: " ";
      position: absolute;
      color: $color;
      border-#{$direction}: $width $style $color;
      @if $direction == top {
        left: $left;
        top: 0;
        width: 100%;
        height: $width;
        transform-origin: 0 0;
        transform: scaleY(0.5);
      }
      @if $direction == bottom {
        left: $left;
        bottom: 0;
        width: 100%;
        height: $width;
        transform-origin: 0 100%;
        transform: scaleY(0.5);
      }
      @if $direction == left {
        left: 0;
        top: 0;
        width: $width;
        height: 100%;
        transform-origin: 0 0;
        transform: scaleX(0.5);
      }
      @if $direction == right {
        right: 0;
        top: 0;
        width: $width;
        height: 100%;
        transform-origin: 100% 0;
        transform: scaleX(0.5);
      }
    }
  }
}


// ---------------------------------------------------------------------------------------------------