// Typography

@mixin typo-preferred-font($usePreferred: true) {
  @if $usePreferred {
    font-family: $preferred_font;
  }
}

@mixin typo-display-4($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 112/10 * $unit;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-3($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 56/10 * $unit;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.02em;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-2($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 45/10 * $unit;
  font-weight: 400;
  line-height: 48/10 * $unit;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-display-1($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 34/10 * $unit;
  font-weight: 400;
  line-height: 40/10 * $unit;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-headline($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 24/10 * $unit;
  font-weight: 400;
  line-height: 32/10 * $unit;
  -moz-osx-font-smoothing: grayscale;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-title($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 20/10 * $unit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-subhead($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 16/10 * $unit;
  font-weight: 400;
  line-height: 24/10 * $unit;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-subhead-2($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 16/10 * $unit;
  font-weight: 400;
  line-height: 28/10 * $unit;
  letter-spacing: 0.04em;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-body-2($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 14/10 * $unit;
  @if $usePreferred {
    font-weight: 500;
  } @else {
    font-weight: bold;
  }
  line-height: 24/10 * $unit;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-body-1($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 14/10 * $unit;
  font-weight: 400;
  line-height: 24/10 * $unit;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-caption($colorContrast: false, $usePreferred: false) {
  @include typo-preferred-font($usePreferred);
  font-size: 12/10 * $unit;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-blockquote($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  position: relative;
  font-size: 24/10 * $unit;
  font-weight: 300;
  font-style: italic;
  line-height: 1.35;
  letter-spacing: 0.08em;

  &:before {
    position: absolute;
    left: -0.5em;
    content: '“';
  }

  &:after {
    content: '”';
    margin-left: -0.05em;
  }

  @if $colorContrast {
    opacity: 0.54;
  }
}

@mixin typo-menu($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 14/10 * $unit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

@mixin typo-button($colorContrast: false, $usePreferred: true) {
  @include typo-preferred-font($usePreferred);
  font-size: 14/10 * $unit;
  font-weight: 500;
  // text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;

  @if $colorContrast {
    opacity: 0.87;
  }
}

// Shadows

// Focus shadow mixin.
@mixin focus-shadow() {
  box-shadow: 0 0 8/10 * $unit rgba(0,0,0,.18),0 8/10 * $unit 16/10 * $unit rgba(0,0,0,.36);
}

@mixin shadow-0dp() {
  box-shadow: none;
}

@mixin shadow-2dp() {
  box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
  0 1/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
  box-shadow: 0 2/10 * $unit 2/10 * $unit 0 rgb(0, 0, 0),
  0 3/10 * $unit 1/10 * $unit -2/10 * $unit rgb(0, 0, 0),
  0 1/10 * $unit 5/10 * $unit 0 rgb(0, 0, 0) \9;
}
@mixin shadow-3dp() {
  box-shadow: 0 3/10 * $unit 4/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0 3/10 * $unit 3/10 * $unit -2/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity),
  0 1/10 * $unit 8/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
}
@mixin shadow-4dp() {
  box-shadow: 0 4/10 * $unit 5/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0 1/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
  0 2/10 * $unit 4/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
}
@mixin shadow-6dp() {
  box-shadow: 0 6/10 * $unit 10/10 * $unit 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0 1/10 * $unit 18/10 * $unit 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
  0 3/10 * $unit 5/10 * $unit -1/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
}
@mixin shadow-8dp() {
  box-shadow: 0 8/10 * $unit 10/10 * $unit 1/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0 3/10 * $unit 14/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
  0 5/10 * $unit 5/10 * $unit -3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
}

@mixin shadow-16dp() {
  box-shadow: 0 16/10 * $unit 24/10 * $unit 2/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0  6/10 * $unit 30/10 * $unit 5/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
  0  8/10 * $unit 10/10 * $unit -5/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
}

@mixin shadow-24dp() {
  box-shadow: 0  9/10 * $unit 46/10 * $unit  8/10 * $unit rgba(0, 0, 0, $shadow-key-penumbra-opacity),
  0 11/10 * $unit 15/10 * $unit -7/10 * $unit rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
  0 24/10 * $unit 38/10 * $unit  3/10 * $unit rgba(0, 0, 0, $shadow-key-umbra-opacity);
}

//Animations

@mixin material-animation-fast-out-slow-in($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-fast-out-slow-in;
}

@mixin material-animation-linear-out-slow-in($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-linear-out-slow-in;
}

@mixin material-animation-fast-out-linear-in($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-fast-out-linear-in;
}

@mixin material-animation-default($duration:0.2s) {
  transition-duration: $duration;
  transition-timing-function: $animation-curve-default;
}



// Transitions

@mixin transition($transition) {
  -webkit-transition: $transition;
       -o-transition: $transition;
          transition: $transition;
}
@mixin transition-property($transition-property) {
  -webkit-transition-property: $transition-property;
          transition-property: $transition-property;
}
@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: $transition-delay;
          transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
  -webkit-transition-duration: $transition-duration;
          transition-duration: $transition-duration;
}
@mixin transition-timing-function($timing-function) {
  -webkit-transition-timing-function: $timing-function;
          transition-timing-function: $timing-function;
}
@mixin transition-transform($transition) {
  -webkit-transition: -webkit-transform $transition;
     -moz-transition: -moz-transform $transition;
       -o-transition: -o-transform $transition;
          transition: transform $transition;
}

//添加圆角
@mixin border-top-radius($radius) {
  border-top-right-radius: $radius;
   border-top-left-radius: $radius;
}
@mixin border-right-radius($radius) {
  border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
}
@mixin border-bottom-radius($radius) {
  border-bottom-right-radius: $radius;
   border-bottom-left-radius: $radius;
}
@mixin border-left-radius($radius) {
  border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
}
//边框按钮颜色
@mixin border-button-styles-variant($text-color,$bg-color,$bg-hover-color,$bg-active-color) {

    color: $text-color;
    border:1px  $bg-color solid;

    &.focus, &:focus, &:hover {
    background-color: $bg-hover-color;
    border-color: $bg-hover-color;
    color:#fff;
    }

    &.active, &:active {
        color:#fff;
        background-color: $bg-active-color;
        border-color: $bg-active-color;
    }
}
//按钮颜色
@mixin timeline-styles-variant($border-color) {
        border-color: $border-color;
        color: $border-color;
}
//按钮颜色
@mixin button-styles-variant($text-color,$bg-color,$bg-hover-color,$bg-active-color) {

        color: $text-color;
        background-color: $bg-color;
        border:1px  $bg-color solid;

    &.focus, &:focus, &:hover {
        background-color: $bg-hover-color;
        border-color: $bg-hover-color;
    }

    &.active, &:active {
        background-color: $bg-active-color;
        border-color: $bg-active-color;
    }
}

//按钮尺寸
@mixin button-size($padding-y, $padding-x, $font-size) {
  padding: $padding-y $padding-x;
  font-size: $font-size;
}

//徽章
@mixin badge-variant($color, $bg) {
  color: $color;
  background-color: $bg;

  &[href] {
    &:hover,
    &:focus {
      color: $color;
    }
  }
}


//标签

@mixin tag-styles-variant($color, $hover-color) {
  background-color: $color;

  &[href] {
    &:hover,
    &:focus {
      background-color: $hover-color;
    }
  }

  &.u-tag-outline {
    color: $color;
    background-color: transparent;
    border-color: $color;
  }
}


// 分页

@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
  > li {
    > a {
      padding: $padding-vertical $padding-horizontal;
      font-size: $font-size;
      line-height: $line-height;
    }
    &:first-child {
      > a{
        @include border-left-radius($border-radius);
      }
    }
    &:last-child {
      > a{
        @include border-right-radius($border-radius);
      }
    }
  }
  >li[role="gap"]{
      > a {
        padding: $padding-vertical+1px $padding-horizontal;
        font-size: $font-size;
        line-height: $line-height;
      }
    }
}

//radio

@mixin radio-styles-variant($color) {
  &.is-checked{
    .u-radio-outer-circle{
        border: 1px solid $color;
    }
    .u-radio-inner-circle{
        background: $color;
    }
  }

}
//progress

@mixin progress-styles-variant($bg-color) {
        background-color: $bg-color;
}

//alert
@mixin alert-styles-variant($bg-color,$text-color) {
    background-color: $bg-color;
    border-color: $bg-color;
    color: $text-color;
}

//checkbox

@mixin checkbox-styles-variant($color) {
  &.is-checked{
    .u-checkbox-outline{
        border: 1px solid $color;
    }
    .u-checkbox-tick-outline{
        background: $color;
    }
  }

}
//switch colors
@mixin switch-styles-variant($color){
    background: $color;
    border: 1px solid $color;
}

//tooltips

@mixin tooltip-styles-variant($color) {
   .tooltip-inner{
    background-color:$color !important;
   }
   &.bottom .tooltip-arrow{
    border-bottom-color:$color !important;
   }
   &.top .tooltip-arrow{
    border-top-color:$color !important;
   }
    &.left .tooltip-arrow{
    border-left-color:$color !important;
   }
    &.right .tooltip-arrow{
    border-right-color:$color !important;
   }
}

@mixin menu-styles-variant($color,$color-hover) {
  .u-menu-item:hover{
    background-color:$color-hover;
    a{
      color: #FFFFFF;
    }

  }
  .u-menu-item.active>a{
    background-color:$color;
  }
  .u-menu-item:focus {
    outline: none;
    background-color: $color;
     a{
      color: #FFFFFF;
    }
  }
}


// utilities
// font-weight
@mixin font-weight-light(){
  font-weight: $font-weight-light;
}
@mixin font-weight-normal(){
  font-weight: $font-weight-normal;
}
@mixin font-weight-medium(){
  font-weight: $font-weight-medium;
}
@mixin font-weight-bold(){
  font-weight: $font-weight-bold;
}

// text
@mixin text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal; //for IE
  white-space: nowrap;
}

@mixin text-break() {
  -webkit-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
  word-wrap: break-word;
  white-space: normal;
}

@mixin text-nowrap() {
  white-space: nowrap;
}


// visibility

@mixin responsive-visibility() {
  display: block !important;
  table   { display: table !important; }
  tr      { display: table-row !important; }
  th ,
  td      { display: table-cell !important; }
}

@mixin responsive-invisibility() {
  display: none !important;
}



@mixin center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@mixin clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}


@mixin hide-text() {
  font: "0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

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


// nav

@mixin navbar-vertical-align($element-height) {
  margin-top: (($navbar-height - $element-height) / 2);
  margin-bottom: (($navbar-height - $element-height) / 2);
}