%boxSizing {
  box-sizing: border-box;
}

%TextEllipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[class*="vhb-"] {
  font-variant: tabular-nums;
  font-feature-settings: 'tnum';
  @extend %boxSizing;
  &:after, &:before,
  *:after, *:before {
    @extend %boxSizing;
  }
}

.vhb-primary-color {
  color: $vhb-primary-color;
}
.vhb-success-color {
  color: $vhb-success-color;
}
.vhb-info-color {
  color: $vhb-info-color;
}
.vhb-warning-color {
  color: $vhb-warning-color;
}
.vhb-danger-color {
  color: $vhb-danger-color;
}
.vhb-perfect-color {
  color: $vhb-table-header-background-color;
}

// 24 栅格布局
.vhb-row {
  $spans: 4.16667%, 8.33333%, 12.5%, 16.66667%, 20.83333%, 25%, 29.16667%, 33.33333%,
          37.5%, 41.66667%, 45.83333%, 50%, 54.16667%, 58.33333%, 62.5%, 66.66667%,
          70.83333%, 75%, 79.16667%, 83.33333%, 87.5%, 91.66667%, 95.83333%, 100%;
  &:after {
    content: '';
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }
  @for $index from 0 to length($spans) {
    & > .vhb-col--#{$index + 1} {
      float: left;
      width: nth($spans, $index + 1);
    }
  }
}

/*animat*/
.is--animat {
  .vhb-sort--asc-btn,
  .vhb-sort--desc-btn,
  .vhb-filter--btn {
    &:before,
    &:after {
      @include animatTransition(border);
    }
  }
  .vhb-input--wrapper {
    .vhb-input {
      @include animatTransition(border);
    }
  }
  .vhb-table--expand-btn,
  .vhb-tree--node-btn {
    @include animatTransition(transform);
  }
  .vhb-checkbox,
  .vhb-radio {
    > input {
      &:checked+span {
        @include animatTransition(background-color);
      }
    }
  }
}