/* 间隔 */
@each $key, $value in (xxl: 48px, xl: 32px, lg: 24px, df: 16px, sm: 12px, xs: 8px, xxs: 4px) {
  @if $key == df {
    @each $dir, $dir2 in (t: top, r: right, b: bottom, l: left) {
      .m#{$dir} {
        margin-#{$dir2}: $value;
      }
      .p#{$dir} {
        padding-#{$dir2}: $value;
      }
    }
    .mg {
      margin: $value;
    }
    .pd {
      padding: $value;
    }
    .mtb {
      margin-top: $value;
      margin-bottom: $value;
    }
    .mlr {
      margin-left: $value;
      margin-right: $value;
    }
    .ptb {
      padding-top: $value;
      padding-bottom: $value;
    }
    .plr {
      padding-left: $value;
      padding-right: $value;
    }
  } @else {
    @each $dir, $dir2 in (t: top, r: right, b: bottom, l: left) {
      .m#{$dir}-#{$key} {
        margin-#{$dir2}: $value;
      }
      .p#{$dir}-#{$key} {
        padding-#{$dir2}: $value;
      }
    }
    .m-#{$key} {
      margin: $value;
    }
    .p-#{$key} {
      padding: $value;
    }
    .mtb-#{$key} {
      margin-top: $value;
      margin-bottom: $value;
    }
    .mlr-#{$key} {
      margin-left: $value;
      margin-right: $value;
    }
    .ptb-#{$key} {
      padding-top: $value;
      padding-bottom: $value;
    }
    .plr-#{$key} {
      padding-left: $value;
      padding-right: $value;
    }
  }
}

/* 字体大小 */
@each $key, $value in (xl: 20px, lg: 18px, md: 16px, df: 14px, sm: 12px, xs: 10px) {
  .text-#{$key} {
    font-size: $value;
  }
}
.text-bold,
.text-bolder {
  font-weight: 700;
}
.text-cut {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@for $row from 2 through 6 {
  .text-cut-#{$row} {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $row;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 颜色 */
@each $name, $value in (
  (-df, #f7f7f7),
  (-red, #ff4f44),
  (-orange, #ff9056),
  (-yellow, #fbbd08),
  (-green, #39b54a),
  (-blue, #0081ff),
  (-grey, #898989),
  (-gray, #aaa),
  (-light, #dfdfdf),
  (-black, #333),
  (-white, #fff),
) {
  @if ($name == -df or $name == -white) {
    .bg#{$name} {
      color: #333;
      background-color: $value;
    }
  } @else {
    .bg#{$name} {
      @extend .text-white;
      background-color: $value;
    }
  }
  .text#{$name} {
    color: $value;
  }
  .line#{$name} {
    color: $value;
    border-color: initial;
  }
}

@each $dir in left, right, center {
  .text-#{$dir} {
    text-align: $dir;
  }
}

.solid,
.solid-top,
.solid-right,
.solid-bottom,
.solid-left {
  position: relative;
  border-color: rgba(0, 0, 0, 0.1);
  &[class*=line] {
    border-color: initial;
  }
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    border-color: inherit;
    border-radius: inherit;
    pointer-events: none;
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
      width: 200%;
      height: 200%;
      transform: scale(.5);
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
      width: 300%;
      height: 300%;
      transform: scale(.33333);
    }
  }
}
.solid::after {
  border-style: solid;
  border-width: 1px;
}
@each $dir in top, right, bottom, left {
  .solid-#{$dir}::after {
    border-#{$dir}-style: solid;
    border-#{$dir}-width: 1px;
  }
}

.radius {
  border-radius: 10px;
  overflow: hidden;
}
@each $key, $value in (xxl: 20px, xl: 16px, lg: 14px, md: 12px, df: 10px, sm: 8px, xs: 6px, xxs: 3px) {
  .radius.#{$key},
  .radius-#{$key} {
    border-radius: $value;
    overflow: hidden;
  }
}

.bg-img {
  background: #f1f1f1 center / contain no-repeat;
  &.cover {
    background-size: cover;
  }
}

.round {
	border-radius: 2000px;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}