@mixin clearfix() {
  zoom: 1;
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    visibility: hidden;
  }
  &:after { clear: both; }
}

@mixin hidden-structure() {
  display: block;
  background: transparent;
  background-image: none; /* safari bug */
  border: none;
  height: 0.1em;
  overflow: hidden;
  padding: 0;
  margin: -0.1em 0 0 -0.1em !important;
  width: 1px;
  left: -1000px;
  top: -1000px;
  position: absolute;
}

@mixin visible-structure() {
  height: auto;
  width: auto;
  position: static;
}

@mixin no-link() {
  text-decoration: none;
  color: $color-text;

  &:hover {
    text-decoration: none;
    color: $color-text;
  }

  &:visited {
    color: $color-text;
    &:hover {
      color: $color-text;
    }
  }

}

@mixin link() {
  &:hover {
    cursor: pointer;
  }
}

@mixin auto-text-color($color: $color-primary) {
  color: contrast($color,
                  $color-text-inverted,
                  $color-text,
                  $lightness:63%);
}

@mixin auto-link-color($color: $color-primary) {
  @include auto-text-color($color);
  &:hover {
    @include auto-text-color($color);
  }

  &:visited {
    @include auto-text-color($color);
    &:hover {
      @include auto-text-color($color);
    }
  }
}

@mixin link-color($color-link: $color-link, $color-link-hover: $color-link-hover) {
  color: $color-link;

  &:hover {
    color: $color-link-hover;
  }

  &:visited {
    color: $color-link;

    &:hover {
      color: $color-link-hover;
    }
  }
}

@mixin animation($name, $args) {
  -webkit-animation: #{$name} #{$args};
  animation: #{$name} #{$args};
}

@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

@mixin filter($args...) {
  -webkit-filter: $args;
  filter: $args;
}

@mixin linear-gradient($args...) {
  background-image: -webkit-linear-gradient(#{$args});
  background-image: linear-gradient(#{$args});
}

// https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
@mixin ie-only($selector) {
  _:-ms-lang(x), #{$selector} {
    @content;
  }
}

// https://stackoverflow.com/questions/15401375/css-media-check-if-not-webkit
@mixin webkit-only() {
  @media screen and (-webkit-min-device-pixel-ratio:0) {
    @content;
  }
}

@function em($pixels: 0, $context: $font-size-base) {
  @return $pixels / $context * 1em;
}

@function rem($pixels: 0, $context: $font-size-base) {
  @return $pixels / $context * 1rem;
}

// https://css-tricks.com/almanac/properties/h/hyphenate/
@mixin hyphens($fallback: true) {
  hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;

  @if $fallback {
    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
      word-break: break-all;
    }
  }
}

@mixin transform($transforms...) {
  -webkit-transform: #{$transforms};
          transform: #{$transforms};
}

@mixin perspective($distance: 0) {
  @include transform(perspective($distance));
}

@mixin rotate($deg: 0) {
  @include transform(rotate(#{$deg}deg));
}

@mixin scale($scale: 0) {
   @include transform(scale($scale));
}

@mixin translate($x: 0, $y: 0) {
   @include transform(translate($x, $y));
}

@mixin translate3d($x: 0, $y: 0, $z: 0) {
   @include translate($x, $y);
   @include transform(translate3d($x, $y, $z));
}

@mixin skew($x: 0, $y: 0) {
   @include transform(skew(#{$x}deg, #{$y}deg));
}

@mixin transform-origin($origin: 0) {
  -webkit-transform-origin: $origin;
          transform-origin: $origin;
}

@mixin appearance($value: none) {
  -webkit-appearance: $value;
     -moz-appearance: $value;
          appearance: $value;
}
