// color=====================================
@primaryColor: #f45a40;
// bg=========================
@primaryBgc: #f45a40;
// textC=======================
@navTC: #fff;
// text-unit=====================
@lh: 2.5rem;
@fz: 1.2rem;
@fw: 600;
@ell: ellipsis;
// border==========================
@radius: 5px;
@w: 1px;
@s: solid;
@c: @primaryColor;
@activeBorderColor: @primaryColor;
@titleUnderline: @primaryColor;

// margin unit===================
@mt-v: 1rem;
@mb-v: 1rem;
@ml-v: 1rem;
@mr-v: 1rem;
@mx-v: 1rem;
@my-v: 1rem;
@mf-v: 0;
// padding unit===================
@pt-v: 1rem;
@pb-v: 1rem;
@pl-v: 1rem;
@pr-v: 1rem;
@px-v: 1rem;
@py-v: 1rem;
@pf-v: 0;

// shadow=======================
@sha-blur: 0; // 模糊
@sha-spread: 5px; // 散布大小
@sha-c: #666;

//transition====================
@gdTime: 0.3s;

// table=================
@tbc: #fff;

// 清楚a默认样式=======================
.init-a {
  text-decoration: none;
  color: inherit;
}
// border===========================================
.border(@c:@c;@w:@w;@s:@s) {
  border: @w @s @c;
}
.border-T(@c:@c;@w:@w;@s:@s;) {
  border-top: @w @s @c;
}
.border-B(@c:@c;@w:@w;@s:@s;) {
  border-bottom: @w @s @c;
}
.border-R(@c:@c;@w:@w;@s:@s;) {
  border-right: @w @s @c;
}
.border-L(@c:@c;@w:@w;@s:@s;) {
  border-left: @w @s @c;
}
.titleUnderline(@c:@titleUnderline;@w:4px;@s:solid;) {
  border-bottom: @w @s @c;
}
.radius(@r:@radius) {
  border-radius: @r;
}

// shadow===============================================
.shadow(@c:@sha-c;@x:0;@y:0;@b:@sha-spread;@s:@sha-blur;) {
  box-shadow: @x @y @b @s @c;
}

// table=========================

.table {
  .mx(auto);
  .my;
  .border(@tbc);
  > .tr {
    .flex-wrap(initial);
    &:not(:last-child) {
      .border-B(@tbc);
    }
    > .th,
    .td {
      &:not(:first-child) {
        .border-L(@tbc);
      }
      flex: 1;
      align-self: stretch;
    }
  }
}
// table=========================

// textStyle=================================================
.t-al(@v:center;) {
  text-align: @v;
}
.t-t(@val:capitalize) {
  text-transform: @val;
}
// https://www.runoob.com/cssref/pr-text-text-transform.html
// 参考值val===========================
.t-ell(@w:100%;@v:@ell;) {
  max-width: @w;
  white-space: nowrap;
  text-overflow: @ell;
  overflow: hidden;
}
// 参考值:

.lh(@v:@lh) {
  line-height: @v;
}
.word-break {
  word-break: break-all;
}
// font=======================================
.fz(@v:@fz;) {
  font-size: @v;
}
.fw(@v:@fw) {
  font-weight: @v;
}

// bg==============================================================
.bg-c(@v:@primaryBgc;@c:@navTC) {
  background-color: @v;
  color: @c;
}

// 手指样式======================
.cur(@s:pointer;) {
  cursor: @s;
}
// 参考值: https://www.w3school.com.cn/cssref/pr_class_cursor.asp

// margin==================
.m(@t:@mt-v;@r:@mr-v;@b:@mb-v;@l:@ml-v;) {
  margin: @t @r @b @l;
}
.mf(@v:@mf-v) {
  margin: @v;
}
.mt(@v:@mt-v) {
  margin-top: @v;
}
.mb(@v:@mb-v) {
  margin-bottom: @v;
}
.ml(@v:@ml-v) {
  margin-left: @v;
}
.mr(@v:@mr-v) {
  margin-right: @v;
}
.mx(@v:@mx-v) {
  margin-left: @v;
  margin-right: @v;
}
.my(@v:@my-v) {
  margin-top: @v;
  margin-bottom: @v;
}

// padding==================
.p(@t:@pt-v;@r:@pr-v;@b:@pb-v;@l:@pl-v;) {
  padding: @t @r @b @l;
}
.pf(@v:@pf-v) {
  padding: @v;
}
.pt(@v:@pt-v) {
  padding-top: @v;
}
.pb(@v:@pb-v) {
  padding-bottom: @v;
}
.pl(@v:@pl-v) {
  padding-left: @v;
}
.pr(@v:@pr-v) {
  padding-right: @v;
}
.px(@v:@px-v) {
  padding-left: @v;
  padding-right: @v;
}
.py(@v:@py-v) {
  padding-top: @v;
  padding-bottom: @v;
}

//布局============================
.wh(@w:100%;@h:100%;) {
  width: @w;
  height: @h;
}
.whl(@w:100%;@h:100%;@lh:inherit) {
  width: @w;
  height: @h;
  line-height: @lh;
}
.maxWh(@w:100%;@h:100%) {
  max-width: @w;
  max-height: @h;
}
.overf(@val:hidden;) {
  overflow: @val;
}
//transition========================
.gd(@t:@gdTime) {
  transition: all @t ease-in-out;
}

//position
.fixed(@t:0;@r:0;@b:0;@l:0;) {
  position: fixed;
  top: @t;
  right: @r;
  bottom: @b;
  left: @l;
}
//float
.float(@val:left;) {
  float: @val;
}
.clearfix {
  &:after {
    content: "";
    display: block;
    clear: both;
    zoom: 1;
  }
}
//flex
.flex-wrap(@jcVal:center;@aiVal:center;@fwVal:nowrap;@direction:initial) {
  display: flex;
  justify-content: @jcVal;
  align-items: @aiVal;
  flex-wrap: @fwVal;
  flex-direction: @direction;
}
.inl-flex(@jcVal:center;@aiVal:center;@fwVal:nowrap;@direction:initial) {
  display: inline-flex;
  justify-content: @jcVal;
  align-items: @aiVal;
  flex-wrap: @fwVal;
  flex-direction: @direction;
}
.inl-flex(@j:initial;@a:initial;@w:nowrap;@d:initial;) {
  display: inline-flex;
  justify-content: @j;
  align-items: @a;
  flex-wrap: @w;
  flex-direction: @d;
}
.flex-items(@flexBasis:0%;@flexGrow:1;@flexShrink:1;@alignSelf:initial) {
  flex-grow: @flexGrow;
  flex-shrink: @flexShrink;
  flex-basis: @flexBasis;
  align-self: @alignSelf;
}

// animated==============================================================

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInRight {
  animation-name: fadeInRight;
}
