$thColor: #666;
$tdColor: #777;
$border: #c2ccdc;
$borderWidth: 1px;
$baseSize: 10px;

@mixin border-box() {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin user-select($val: none) {
  -webkit-user-select: $val;
  -moz-user-select: $val;
  -ms-user-select: $val;
  user-select: $val;
}

@function size($val) {
  @return $val * $baseSize;
}

$thHeight: size(4);
$tdHeight: size(3.4);
$font-size: size(1.4);

.vue-table {
  width: 100%;

  .tr {
    border-top: $borderWidth solid $border;

    &:last-child {
      border-bottom: $borderWidth solid $border;
    }
  }

  .th,
  .td {
    position: relative;
    border-left: $borderWidth solid $border;
    font-size: size(1.4);
    text-align: center;
    padding: 0 size(1);

    &:last-child {
      border-right: $borderWidth solid $border;
    }
  }

  .thead {
    .tr {
      min-height: $thHeight;

      .th {
        height: 100%;
        color: $thColor;
      }
    }
  }

  .tbody {
    .tr {
      min-height: $tdHeight;

      &:first-child {
        border-top: 0;
      }

      .td {
        height: 100%;
        color: $tdColor;

        .td-value {
          display: inline-block;
          max-width: 100%;
          vertical-align: middle;
        }
      }
    }
  }
}

.table-extend {
  /* scrollbar css */
  .scrollbar-wrap {
    .scrollbar {
      width: size(0.4) !important;
      border-radius: size(0.2) !important;
    }
  }

  .tr {
    @include border-box;
    white-space: nowrap;
  }

  .th,
  .td {
    @include user-select(none);
    @include border-box;
    display: inline-block;
    position: relative;
    min-height: $thHeight;
    line-height: $thHeight;
    vertical-align: middle;

    .column-resize {
      position: absolute;
      right: size(-0.5);
      top: 50%;
      max-width: 100%;
      width: size(1);
      height: $thHeight;
      margin: -$thHeight/2 0 0;
      cursor: col-resize;
    }
  }

  .td {
    min-height: $tdHeight;
    line-height: $tdHeight;

    img {
      max-width: 100%;
    }

    .td-value {
      display: inline-block;
      max-width: 100%;
      min-height: $tdHeight;
      vertical-align: middle;
    }
  }
}