@import '_fonts';

$blue: #0084ff;
$light-blue: lightblue;
$gridlet: 1;
$spacer: 1;

// apply to flex container
@mixin flex-container ($flex: 1, $flex-direction: row, $flex-wrap: wrap) {
  display: flex;
  flex-direction: $flex-direction;
  flex-wrap: $flex-wrap;
  flex: $flex;
}

// center and constrain element to max-width
@mixin width-wrapper {
  max-width: $max-width;
  margin: 0 auto;
}

// Inline Block + Zoom Fix
@mixin inline-block-zoom {
  @include inline-block;
  zoom: 1;
}

// A new micro clearfix hack
// http://nicolasgallagher.com/micro-clearfix-hack/
@mixin microfix {
  // For modern browsers
  &:before, &:after {
    content: "";
    display: table;
  }

  &:after {
    clear: both;
  }
}

@mixin grad($top, $btm) {
  background-color: mix($top, $btm);
  @include background-image(linear-gradient($top, $btm));
}

@mixin debug {
  @if $DEBUG {
    outline: 1px solid #f00;
  }
}

@mixin user-select($prop) {
  -webkit-user-select: $prop;
  -moz-user-select: $prop;
  -ms-user-select: $prop;
  -o-user-select: $prop;
  user-select: $prop;
}

@mixin ellipsis {
  white-space: nowrap;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

// improved hiddden text hack
@mixin hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

@mixin hide-block {
  position: absolute;
  z-index: -2;
  opacity: 0;
  width: 0;
  height: 0;
}

@mixin box-shadow ($horizontal: 0px, $vertical: 10px, $blur: 40px, $spread: -10px, $color: #c4c4c4) {
  box-shadow: $horizontal $vertical $blur $spread $color;
}

@mixin divider ($color: $black, $size: 9px, $space: 10px) {
  position: relative;
  padding-right: $space;
  margin-right: $space;

  &:after {
    content: '';
    display: inline-block;
    background-color: $color;
    width: 1px;
    height: $size;
    top: 50%;
    right: 0;
    position: absolute;
    transform: translateY(-50%);
  }
}

@mixin flyout ($hover-selector) {
  @include box-shadow;
  padding-top: 5px;
  position: absolute;
  top: 0;
  width: 100%;
  opacity: 0;
  z-index: -1;

  // transition-out effect
  transition: top 250ms, opacity 200ms 50ms;

  #{$hover-selector}:hover & {
    top: 100%;
    opacity: 1;
    z-index: 1;
    pointer-events: auto;

    // transition-in effect
    transition: top 250ms, opacity 200ms 50ms;
  }
}

@mixin hover-flip ($selector: '.fa-angle-down') {

  #{$selector} {
    color: $gray;
    transition: transform 150ms;
  }

  &:hover {

    #{$selector} {
      color: $red;
      transform: scaleY(-1);
    }
  }
}

@mixin gradient ($top, $btm) {
  background-color: mix($top, $btm);
  @include background-image(linear-gradient($top, $btm));
}

@mixin heading-large {
  @include raleway;
  font-weight: 300;
  color: $black;
  font-size: 32px;
  margin-bottom: 40px;
}

@mixin heading-medium {
  @include raleway;
  font-weight: 400;
  color: $black;
  font-size: 18px;
  margin-bottom: 10px;
}

@mixin heading-small {
  @include raleway;
  font-weight: 600;
  color: $black;
  font-size: 15px;
  margin-bottom: 10px;
}

@mixin text-default {
  @include open-sans;
  font-size: 14px;
}

@mixin text-cta {
  @include open-sans;
  font-weight: 600;
  font-size: 14px;
}

@mixin text-description {
  @include open-sans;
  font-size: 12px;
}

@mixin text-meta {
  @include open-sans;
  font-size: 10px;
}
