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

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

[class*="s-"] {
  @extend %boxSizing;
  &:after, &:before,
  *:after, *:before {
    @extend %boxSizing;
  }
}

body {
  margin: 0;
  line-height: 1.5;
  font-variant: tabular-nums;
  font-feature-settings: 'tnum';
}

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

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