//
// Hashicorp Nav (header/footer) Utiliy Vars and Mixins
//
// Notes:
// - Include this in Application.scss before header and feature-footer
// - Open Sans Google (Semibold - 600) font needs to be included if not already
// --------------------------------------------------

// Variables
$font-family-open-sans:	'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$header-font-family: $font-family-open-sans;
$header-font-weight: 600; // semi-bold

$header-height: 74px;
$header-mobile-height: 60px;
$by-hashicorp-width: 74px;
$by-hashicorp-height: 16px;
$nav-margin-right: 12px;

// Mixins
@mixin hashi-a-style-core{
  font-family: $header-font-family;
  font-weight: $header-font-weight;
  font-size: 14px;
  //letter-spacing: 0.0625em;
}

@mixin hashi-a-style{
  margin: 0 15px;
  padding: 0;
  line-height: 22px;
  @include hashi-a-style-core();
  @include transition( color 0.3s ease );

  &:hover{
    @include transition( color 0.3s ease );
    background-color: transparent;
  }
}

//general shared project mixins
@mixin img-retina($image1x, $image, $width, $height) {
  background-image: image-url($image1x);
  background-size: $width $height;
  background-repeat: no-repeat;

  @media (min--moz-device-pixel-ratio: 1.3),
  (-o-min-device-pixel-ratio: 2.6/2),
  (-webkit-min-device-pixel-ratio: 1.3),
  (min-device-pixel-ratio: 1.3),
  (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: image-url($image);
    background-size: $width $height;
  }
}

//
// -------------------------
@mixin anti-alias() {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

@mixin open-light() {
  font-family: $font-family-open-sans;
  font-weight: 300;
}

@mixin open() {
  font-family: $font-family-open-sans;
  font-weight: 400;
}

@mixin open-sb() {
  font-family: $font-family-open-sans;
  font-weight: 600;
}

@mixin open-bold() {
  font-family: $font-family-open-sans;
  font-weight: 700;
}

@mixin bez-1-transition{
  @include transition( all 300ms ease-in-out );
}
