@mixin brand-font-h1 {
  font-family: $font-family-brand-light;
  font-weight: 100;
  font-size: $h1-font-size;
  -webkit-font-smoothing: antialiased;
}

@mixin brand-font-h2 {
  font-family: $font-family-brand-bold;
  font-weight: 700;
  font-size: $h2-font-size;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

@mixin brand-font-h3 {
  font-family: $font-family-brand;
  font-weight: 400;
  font-size: $h3-font-size;
  -webkit-font-smoothing: antialiased;
}

@mixin brand-font-h4 {
  font-family: $font-family-brand-bold;
  font-size: $h4-font-size;
  font-weight: 400;
}

@mixin brand-font-h5 {
  font-family: $font-family-brand;
  font-size: $h5-font-size;
  font-weight: 400;
  text-decoration: underline;
}

@mixin brand-font-h6 {
  font-family: $font-family-brand;
  font-size: $h6-font-size;
  font-weight: 400;
  text-decoration: underline;
}

@mixin brand-font-label {
  font-family: $font-family-brand;
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0.03125rem;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
}

@mixin fade-in-keyframes($stop-at) {
  @keyframes fadeIn#{$stop-at} {
    from  {
      opacity: 0;
    }

    to {
      opacity: $stop-at/100;
    }
  }
}

$status-hint-width: 3px;

@mixin status-hint-top($color) {
  box-shadow: 0 $status-hint-width 0 $color inset;
}

@mixin status-hint-right($color) {
  box-shadow: $status-hint-width 0 0 $color inset;
}

@mixin status-hint-left($color) {
  box-shadow: $status-hint-width 0 0 $color inset;
}

@mixin status-hint-psuedo ($color, $placement) {
  position: relative;

  &:before {
    content: " ";
    display: inline-block;
    position: absolute;
    background-color: $color;
    z-index: 10;

    @if $placement == top {
      width: 100%;
      height: $status-hint-width;
      top: 0;
      left: 0;
    } @else if $placement == right {
      width: $status-hint-width;
      height: 100%;
      top: 0;
      right: 0;
    } @else if $placement == bottom {
      width: 100%;
      height: $status-hint-width;
      bottom: 0;
      left: 0;
    } @else {
      width: $status-hint-width;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
}

@mixin status-hint-top-alt($color) {
  @include status-hint-psuedo($color, "top")
};

@mixin status-hint-left-alt($color) {
  @include status-hint-psuedo($color, "left")
};

@mixin status-hint-bottom-alt($color) {
  @include status-hint-psuedo($color, "bottom")
};

@mixin status-hint-right-alt($color) {
  @include status-hint-psuedo($color, "right")
};

@mixin antialiased() {
  -webkit-font-smoothing: subpixel-antialiased;
}

@mixin outline ($color, $border: $color) {
  background-color: $white;
  padding: .715em 1.2em 0.485em;
  border: 2px solid $border;
  color: $color;
  box-shadow: none;

  &:hover {
    background-color: $border;
    border: 2px solid $border;
    color: $white;
  }

  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active {
    background-color: $border;
    border: 2px solid $border;
    color: $white;
  }
}

@mixin button($background, $border: $background, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
  @include gradient-bg($background);
  @include box-shadow($btn-box-shadow);
  @include hover {
    @include gradient-bg($hover-background);
    color: color-yiq($hover-background);
    border-color: $hover-border;
  }
  color: color-yiq($background);
  border-color: $border;
  $active-shadow: rgba($border, .5);


  &:focus,
  &.focus {
    // Avoid using mixin so we can pass custom focus shadow properly
    @if $enable-shadows {
      box-shadow: $btn-box-shadow, 0 0 0 $input-btn-focus-width $active-shadow;
    }
  }

  // Disabled comes first so active can properly restyle
  &.disabled,
  &:disabled {
    background-color: $background;
    border-color: $border;
  }

  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active,
  .show > &.dropdown-toggle {
    color: color-yiq($active-background);
    background-color: $active-background;
    $active-shadow: rgba($border, .5);

    @if $enable-gradients {
      background-image: none; // Remove the gradient for the pressed/active state
    }
    border-color: $active-border;

    // Avoid using mixin so we can pass custom focus shadow properly
    @if $enable-shadows {
      box-shadow: $btn-box-shadow, 0 0 0 $input-btn-active-width $active-shadow;
    } @else {
      box-shadow: 0 0 0 $input-btn-active-width $active-shadow;
    }
  }
}

@function rem($pixels, $context: $font-size-root-int) {
  @return #{$pixels/$context}rem;
}

@function em($pixels, $context: $font-size-root-int) {
  @return #{$pixels/$context}em;
}


@mixin caret($size: .3rem, $direction: "down", $color: $white) {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: middle;
  content: "";
  margin-left: $size;
  border: $size solid $transparent;

  @if $direction == "up" {
    border-bottom: $size solid $color;
  } @else if $direction == "right" {
    border-left: $size solid $color;
  } @else if $direction == "down" {
    border-top: $size solid $color;
  } @else if $direction == "left" {
    border-right: $size solid $color;
  }
}

@mixin status-color-components($name, $color-var, $invert-text: false) {
  .text-#{$name} {
    color: $color-var;
  }

  .badge-#{$name}, .bg-#{$name} {
    background: $color-var;
    color: if($invert-text, $white, $gray-800);
  }
}

@mixin text-color($color) {
  h1, h2, h3, h4, h5, h6, ul, li, p {
    color: $color;
  }
}

@mixin status-border($color, $width: 3px) {
  box-shadow: inset $width 0 0 0 $color;
}

@mixin bg-gradient-to-transparent($direction: right, $color: $white, $size: 50px) {
  background: linear-gradient(to $direction, transparent, $color 70%);
  display: block;
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  left: $size * -1;
  width: $size;
}
