$headerHeight: 65px;

@mixin font-stack-normal {
  font-family: "Lato", "Lucida Grande","Lucida Sans Unicode", Tahoma, Sans-Serif;
}
@mixin font-stack-header {
  // font-family: 'Raleway', Sans-Serif;
  font-family: "Telefon Black", Sans-Serif;
}
@mixin font-stack-code {
  font-family: 'Source Code Pro', Menlo, Consolas, Monaco, monospace;
}

@mixin header-line-under {
  border-bottom: 1px solid rgba(white, 0.1);
  padding-bottom: 5px;
}

@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

@mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
  $u1: unit($min-vw);
  $u2: unit($max-vw);
  $u3: unit($min-font-size);
  $u4: unit($max-font-size);

  @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
    & {

      font-size: $min-font-size;
      @media screen and (min-width: $min-vw) {
        font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
      }

      @media screen and (min-width: $max-vw) {
        font-size: $max-font-size;
      }
    }
  }
}


@mixin coverer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@mixin centerer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

%emboss-lower {
  box-shadow:
    0 1px 0 rgba(white, 0.1),
    inset 0 1px 0 black;
}

// Dropdown
%dropdown {
  background: white;
  box-shadow: 0 0 10px rgba(black, 0.35);
  position: absolute;
  top: 100%;
  // left value set with JS to center
  padding: 5px 0;
  width: 200px;
  color: #222;
  opacity: 0;
  visibility: hidden;
  transition: transform 0.15s, opacity 0.15s;
  transform: scale(0.95);
  transform-origin: top right;
  &.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
  }
}

// Word Wrapping
@mixin word-wrap() {
  // Removing the next two because they are what causes words that break right in the middle
  // -ms-word-break: break-all;
  // word-break:     break-all;
  word-break:     break-word;

  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
  hyphens:         auto;
}

@mixin linkStyleText($linkColor, $borderColor) {
  a {
    color: $linkColor;
    border-bottom: 1px solid $borderColor;
    &:hover,
    &:focus {
      color: lighten($linkColor, 20%);
      border-bottom-color: lighten($borderColor, 20%);
    }
  }
}

// Accessible hiding
@mixin screen-reader-text() {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

// Overflow Ellipsis
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin emboss($opacity, $opacity2) {
  box-shadow: white($opacity) 0 1px 0, inset black($opacity2) 0 1px 0;
}
@function black($opacity) {
  @return rgba(black, $opacity)
}
@function white($opacity) {
  @return rgba(white, $opacity)
}

// Media Query Naming
@mixin breakpoint($point) {
  @if ($MQs == true) {
    @if $point == baby-bear {
      @media (max-width: 550px) { @content; }
    }
    @if $point == mama-bear {
      @media (max-width: 830px) { @content; }
    }
    @if $point == papa-bear {
      @media (max-width: 1000px) { @content; }
    }
    @if $point == super-bear {
      @media (max-width: 1280px) { @content; }
    }

    @if $point == reverso-baby-bear {
      @media (min-width: 551px) { @content; }
    }
    @if $point == reverso-mama-bear {
      @media (min-width: 831px) { @content; }
    }
    @if $point == reverso-papa-bear {
      @media (min-width: 1001px) { @content; }
    }
    @if $point == reverso-super-bear {
      @media (min-width: 1281px) { @content; }
    }

    @if $point == exclusive-baby-bear {
      @media (max-width: 550px) { @content; }
    }
    @if $point == exclusive-mama-bear {
      @media (min-width: 551px) and (max-width: 830px) { @content; }
    }
    @if $point == exclusive-papa-bear {
      @media (min-width: 831px) and (max-width: 1280px) { @content; }
    }

    @if $point == iOS {
      @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) {
        @content;
      }
    }
  }
}

@mixin rowMachine($numberPerRow, $margin) {
  width: ((100% - ($margin * ($numberPerRow - 1))) / $numberPerRow);
  margin-bottom: $margin;
  &:nth-child(n) {
    margin-right: $margin;
  }
  &:nth-child(#{$numberPerRow}n) {
    margin-right: 0;
  }
}

@mixin buttonBase($bgColor, $textColor) {
  background: $bgColor;
  color: $textColor;
  &:hover,
  &:focus,
  &.button-focus:focus {
    background: darken($bgColor, 10%);
  }
  &.button-focus:focus {
    box-shadow: 0px 0px 0px 2px darken($bgColor, 20%);
  }
}

@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white,  50%)) {
  // For Google Chrome
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
  }
  &::-webkit-scrollbar-track {
    background: $background-color;
  }
  // For Internet Explorer
  body & {
    scrollbar-face-color: $foreground-color;
    scrollbar-track-color: $background-color;
  }
}

%module {
  display: block;
  padding: 20px;
  position: relative;
  background: $gray-medium-dark;
  margin: 0 0 20px 0;
  overflow: hidden; // added to hide URL's breaking out of profile
  p, li, .post-content {
    color: #999;
  }
  .post-content {
    margin: 0 0 1em 0;
  }
  &:not(.single-collection),
  &:not(.single-post) {
    > h1, > h2, > h3, > h4 {
      border-bottom: 3px solid rgba(white, 0.1);
      padding-bottom: 10px;
      position: relative;
    }
  }
  .error & {
    background: rgba(black, 0.8);
  }
  .module {
    background: $gray-dark;
  }
}

@mixin help-flyout-reverse {
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: 12px;
  &::before {
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: -24px;
    border-right: 10px solid transparent;
    border-left: 10px solid #555;
  }
}
@mixin help-flyout-up {
  top: auto;
  bottom: -20px;
  &::before {
    top: auto;
    bottom: 10px;
  }
}

@mixin help-flyout-flush-right-top {
  right: 0;
  left: auto;
  top: auto;
  margin-right: 0;
  margin-left: 0;
  bottom: calc(100% + 20px);
  &::before {
    top: calc(100% + 5px);
    bottom: 0px;
    left: auto;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid #555;
    border-bottom: none;
    border-right: 10px solid transparent;
  }
}

@mixin help-flyout-middle {
  top: 50%;
  transform: translateY(-50%);
  &::before {
    top: 50%;
    transform: translateY(-50%);
  }
}