@import './variables.less';

@theme-red: #fb6465;
@theme-green: #42bcA9;
@theme-blue: #5eb7ed;
@theme-yellow: #FFBF5A;

.page-control-theme(@color) {
  .go {
    color: @color;
  }
  
  .active {
    background-color: @color;
    border: 1px solid @color;
  }

  .back {
    color: @color;
  }

  .jumper {
    button {
      &:active {
        color: @color;
      }
    }
  }
  li {
    a {
      color: @color;
    }
  }
}

.table-theme(@color) when (@color = @theme-yellow) {
  thead {
    background-color: #FEECE1;
  }
  tbody {
    tr{
      border-bottom: 1px solid @xm-color-border;
    }
  }
  .header {
    .download {
      color: @color;
    }
  }
}

.table-theme(@color) when (@color = @theme-blue) {
  thead {
    background-color: #E0F3FE;
  }
  tbody {
    tr{
      border-bottom: 1px solid @xm-color-border;
    }
  }
  .header {
    .download {
      color: @color;
    }
  }
}

.table-theme(@color) when (@color = @theme-green) {
  thead {
    background-color: #CFECE8;
  }
  tbody {
    tr {
      border-bottom:1px solid @xm-color-border;
    }
  }
  .header {
    .download {
      color: @color;
    }
  }
}

.table-theme(@color) when (@color = @theme-red) {
  thead {
    background-color: #FCE6E6;
  }
  tbody {
    tr:nth-child(even) {
      background-color: #FFF9F9;
    }
  }
  .header {
    .download {
      color: @color;
    }
  }
}

.tab(@color) {
    span {
      color: @xm-sub-text-color;
      border: 1px solid @color;
      border-left: none;
      &:first-child {
        border-left: 1px solid @color;
      }
    }
    .active {
      color: #ffffff;
      background: @color;
    }
}

.graph-theme(@color) {
  .ac-tooltip {
    border: 1px solid @color;
  }
}


.flexbox() {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex(@value: 1) {
    -webkit-box-flex: @value;
    -webkit-flex: @value;
    flex: @value;
}

// order
.order(@value: 1) {
    -webkit-box-ordinal-group: @value;
    -webkit-border: @value;
    order: @value;
}

.flex-wrap(@fw) when (@fw = nowrap) {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex-wrap(@fw) when (@fw = wrap) {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-wrap(@fw) when not (@fw = wrap) and not (@fw = nowrap) {
    -webkit-flex-wrap: @fw;
    -ms-flex-wrap: @fw;
    flex-wrap: @fw;
}
.flex-shrink(@fs) {
    -webkit-flex-shrink: @fs;
    -ms-flex: 0 @fs auto;
    flex-shrink: @fs;
}


// flex-direction
.flex-direction (@direction) when (@direction = row) {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.flex-direction (@direction) when (@direction = row-reverse) {
    -webkit-box-pack: end;
    -webkit-box-orient: reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}
.flex-direction (@direction) when (@direction = column) {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex-direction (@direction) when (@direction = column-reverse) {
    -webkit-box-pack: end;
    -webkit-box-orient: reverse;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.justify-content(@jc) when (@jc = flex-start) {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.justify-content(@jc) when (@jc = flex-end) {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.justify-content(@jc) when (@jc = space-between) {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.justify-content(@jc) when not (@jc = flex-start) and not (@jc = flex-end) and not (@jc = space-between) {
    -webkit-box-pack: @jc;
    -ms-flex-pack: @jc;
    -webkit-justify-content: @jc;
    justify-content: @jc;
}
.align-items(@ai) when (@ai = flex-start) {
    -webkit-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@ai) when (@ai = flex-end) {
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@ai) when not (@ai = flex-start) and not (@ai = flex-end) {
    -webkit-box-align: @ai;
    -ms-flex-align: @ai;
    -webkit-align-items: @ai;
    align-items: @ai;
}
.align-content(@ai) {
    -ms-flex-line-pack: @ai;
    -webkit-align-content: @ai;
    align-content: @ai;
}
.align-self(@as) {
    -ms-flex-item-align: @as;
    -webkit-align-self: @as;
    align-self: @as;
}

.text-overflow-ellipsis(){
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  display: inline-block;
}

.text-overflow-ellipsis-line(@line) {
  text-overflow: ellipsis;
  overflow: hidden;
  word-break:break-all;
  display:-webkit-box;
  -webkit-line-clamp: @line;
  /*! autoprefixer: off */
  -webkit-box-orient:vertical;
  /* autoprefixer: on */
}

.btn-poster() {
  display: inline-block;
  padding: 3px 12px;
  color: #666;
  border-radius:4px;
  border: 1px solid #e8e8e8;
  cursor: pointer;
}
