//
// Text
//



//text-size
$text-size : (sm:(12px,18px),md:(14px,21px),base:(16px,24px),lg:(18px,26px),xl:(20px,28px),xxl:(24px,30px),30:(30px,38px),36:(36px,38px),42:(42px,50px),50:(50px,58px),58:(58px,68px),80:(80px,94px),100:(100px,118px));

//size
@each $key, $val in $text-size {
  @each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
      .text#{$infix}-#{$key} {
        font-size: nth($val,1);
        line-height: nth($val,2);
      }
    }
  }
}

.text-10 {
  display: inline-block;
  font-size: 12px;
  transform: scale(.84);
  transform-origin: 0 0;
}

// 兼容.text 用法，后续使用.text-base
.text {
  font-size:16px;
  line-height: 24px;
}

// Alignment

.text-justify  { text-align: justify !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }

// Responsive alignment

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

// Transformation

.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }

// Weight and italics

.font-weight-light   {  font-weight: 300 !important;}
.font-weight-normal { font-weight: 400 !important;}
.font-weight-bold   {  font-weight: 500 !important;}
.font-italic        { font-style: italic; }

// colors

@include text-emphasis-variant('.text-primary', $brand-primary);

@include text-emphasis-variant('.text-success', $brand-success);

@include text-emphasis-variant('.text-info', $brand-info);

@include text-emphasis-variant('.text-warning', $brand-warning);

@include text-emphasis-variant('.text-danger', $brand-danger);

@include text-emphasis-variant('.text-gray', $body-color);

@include text-emphasis-variant('.text-dark', $gray-dark);

@include text-emphasis-variant('.text-muted', $gray-light);

@include text-emphasis-variant('.text-white', $white);

// Misc

.text-hide {
  @include text-hide();
}