@import '../colours/colours';

@mixin fontFamily($name) {
  font-family: $name, Arial, sans-serif;
}

@mixin loadFonts() {
  $fontDirectory: "../fonts";
  $fontList: "Body-WebS" "BodyItalic-WebS" "Bold-WebS" "BoldItalic-WebS";

  @each $font in $fontList {
    $prefix: $fontDirectory + '/THEOUTNET-' + $font;
    @font-face {
      font-family: $font;
      src:url($prefix + ".eot"); /* IE9 Compat Modes */
      src:url($prefix + ".eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
      url($prefix + ".woff2") format("woff2"), /* Modern Browsers */
      url($prefix + ".woff") format("woff"), /* Modern Browsers */
      url($prefix + ".ttf") format("truetype"), /* Safari, Android, iOS */
      url($prefix + ".svg") format("svg");	/* Legacy iOS */
    }
  }
}

%underline {
  position: relative;
  line-height: normal;
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -1px;
    left: 0;
    transition: transform .3s cubic-bezier(0.215, 0.610, 0.355, 1.000);
    background-color: $black;
  }
  &:hover {
    &:before {
      transform: scaleY(2);
    }
  }
}