// Core variables

// Global
@html-font-size: 100px;
@html-line-height: 1.428571429;
@body-bg: #fff;
@body-font-color: #333;
@body-font-size: .14rem;

@base-font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto;
@fallback-font-family: "Microsoft YaHei", sans-serif;
@cjk-font-family: @base-font-family, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Hiragino Kaku Gothic Pro", Meiryo, "Malgun Gothic", @fallback-font-family;
@body-font-family: @fallback-font-family;

// Colors
@core-color: #4197c7;
@core-secondary-color: lighten(@core-color, 10%);
@core-dark-color: #363636;
@core-secondary-dark-color: #28212d;
@core-light-color: #fff;
@core-light-brand-color: #f3f3f3;
@core-meta-color: #bfbbba;
@core-link-color: #06C;
@color-txt-gray: #999;
@color-txt-gray2: #888;
@color-bg-gray: #8b8b8b;
@core-border-color: #eee;
@core-empty-bg: #f8f8f8;
@control-color: #c5c5c5;
@control-color-success: #32b643;
@control-color-info: #2980b9;
@control-color-warning: #ffac1d;
@control-color-danger: #e85600;
@control-color-red: #e8260b;


/// animation
.transition-duration-fast{
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

// Mixins
.clearfix() {
  &::after {
    clear: both;
    content: "";
    display: table;
  }
}
.control-shadow() {
  box-shadow: 0 0 .04rem fade(@core-color, 25%);
}
.control-transition() {
  transition: all .15s ease;
}
.toast-variant(@color) {
  background: fade(@color, 90%);
  border-color: @color;
}
.label-base() {
  border-radius: .02rem;
  font-size: .095em;
  padding: .01em .03em;
  vertical-align: baseline;
}
.label-variant(@color) {
  background: @color;
  color: @core-light-color;
}