/// _utils.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-

/*==========  VARIABLES  ==========*/

  // Defining breakpoints
  $medium: 620px !default;
  $wide: 800px !default;
  $huge: 1600px !default;
  $mediumContainer: 688px !default;
  $wideContainer: 864px !default;

  // Defining grid sizes
  $mediumColCount: 3 !default;
  $mediumColWidth: 30.3% !default;
  $mediumGutterWidth: 4.5% !default;
  $wideColCount: 4 !default;
  $wideColWidth: 22.2% !default;
  $wideGutterWidth: 3.7% !default;

  // Defining colors
  $colorBlue: #3372df !default;
  $colorBlueSecondary: lighten($colorBlue, 30%) !default;
  $colorGreen: #0f9d58 !default;
  $colorGreenSecondary: lighten($colorGreen, 30%) !default;
  $colorRed: #cb4437 !default;
  $colorRedSecondary: lighten($colorRed, 30%) !default;
  $colorYellow: #f4b400 !default;
  $colorYellowSecondary: lighten($colorYellow, 20%) !default;

  $colorRemember: #09829a !default;
  $colorLearning: #da2e75 !default;

  $colorGrayBackground: #f0f0f0 !default;
  $colorGrayKeyline: #e0e0e0 !default;
  $colorGray: #737373 !default;
  $colorGrayLight: #eeeeee !default;
  $colorGrayDark: #404040 !default;

  $colorText: $colorGrayDark !default;
  $colorHighlight: $colorBlue !default;
  $colorWarning: $colorYellowSecondary !default;
  $colorMuted: $colorGray !default;
  $colorDanger: $colorRed !default;

  $colorLayouts: #297ea9 !default;
  $colorLayoutsSecondary: lighten($colorLayouts, 30%) !default;
  $colorUser: #2c8566 !default;
  $colorUserSecondary: lighten($colorUser, 30%) !default;
  $colorMedia: #cf423a !default;
  $colorMediaSecondary: lighten($colorMedia, 30%) !default;
  $colorPerformance: #7b5294 !default;
  $colorPerformanceSecondary: lighten($colorPerformance, 30%) !default;

  // Defining font family
  $fontDefault: 'Ubuntu', Helvetica, Arial, sans-serif !default;
  $fontHighlight: 'Ubuntu', Helvetica, sans-serif !default;
  $fontIcon: 'icons' !default;

  // Defining font sizes
  $fontSmall: 13px !default;
  $fontBase: 16px  !default;
  $fontMedium: 20px !default;
  $fontLarge: 26px !default;
  $fontXLarge: 42px !default;
  $fontXXLarge: 68px !default;
  $fontHuge: 110px !default;

  // Defining baseline line height
  $lineHeight: 26px !default;

  // Defining animation easings
  $animationEasing: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;

  // Defining sidebar stuff
  $sidebarWidth: 280px !default;


/*==========  FUNCTIONS  ==========*/

  @function leading($size, $context: $lineHeight) {
    @return  $context / $size + em;
  }


/*==========  MIXINS  ==========*/

  @mixin media-query($media-query) {
    @if $media-query == small {
      @media only screen and (max-width: $medium - 1) { @content; }
    }

    @if $media-query == medium {
      @media only screen and (min-width: $medium) { @content; }
    }

    @if $media-query == medium-only {
      @media only screen and (min-width: $medium) and (max-width: $wide - 1) { @content; }
    }

    @if $media-query == wide {
      @media only screen and (min-width: $wide) { @content; }
    }

    @if $media-query == huge {
      @media only screen and (min-width: $huge) { @content; }
    }
  }

  // Just some helpers...
  @mixin small-only { @include media-query(small) { @content }; }
  @mixin medium { @include media-query(medium) { @content }; }
  @mixin medium-only { @include media-query(medium-only) { @content }; }
  @mixin wide { @include media-query(wide) { @content }; }
  @mixin huge { @include media-query(huge) { @content }; }

  // Mixin to constrain elements
  @mixin container($isRelative: false) {
    box-sizing: content-box;

    @if $isRelative {
      position: relative;
    }

    padding-left: 5%;
    padding-right: 5%;
    margin-left: auto;
    margin-right: auto;


    @include medium {
      padding-left: 4.8%;
      padding-right: 4.8%;
      max-width: $mediumContainer;
    }

    @include wide {
      padding-left: 4.4%;
      padding-right: 4.4%;
      max-width: $wideContainer;
    }
  }



  // Mixin to show a baseline grid
  // only visible when body has 'debug' class
  @mixin baseline-grid() {
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      width: 100%;
      z-index: 9;

      display: none;
      background-image: linear-gradient(to bottom, rgba(0,0,0,0.15) 95%,rgba(0,0,0,0.15) 100%);

      background-size: 100% 26px;
    }

    &.debug::after {
      display: block;
      pointer-events: none;
    }
  }

  // Mixins simply to store CSS rules
  @mixin rule--small {
    font-size: $fontSmall;
    line-height: 2.0000em; /* 26px */
    padding-top: 2.0000em;
    padding-bottom: 0;
  }

  @mixin rule--base {
    font-size: $fontBase;
    line-height: 1.6250em; /* 26px */
    padding-top: 1.6250em;
    padding-bottom: 0;
  }

  @mixin rule--medium {
    font-size: $fontMedium;
    font-weight: 300;
    line-height: 1.3000em; /* 26px */
    padding-top: 1.3000em;
    padding-bottom: 0;
  }

  @mixin rule--large {
    font-family: $fontHighlight;
    font-size: $fontLarge;
    font-weight: 300;
    line-height: 1.0000em; /* 26px */
    padding-top: 1.0000em;
    padding-bottom: 0;
  }

  @mixin rule--xlarge {
    font-family: $fontHighlight;
    font-size: $fontXLarge;
    font-weight: 300;
    line-height: 1.2381em; /* 52px */
    padding-top: 0.6190em;
    padding-bottom: 0;
  }

  @mixin rule--xxlarge {
    font-family: $fontHighlight;
    font-size: $fontXXLarge;
    font-weight: 300;
    line-height: 1.1471em; /* 78px */
    padding-top: 0.3824em;
    padding-bottom: 0;
  }

  @mixin rule--huge {
    font-family: $fontHighlight;
    font-size: $fontHuge;
    font-weight: 300;
    line-height: 1.19em; /* 130px */
    padding-top: 0.2364em;
    padding-bottom: 0;
  }



  // Mixins to determine which rule to use at which breakpoint
  @mixin type--small($isFromMixin: false) {
    @include rule--small;
  }

  @mixin type--base($isFromMixin: false) {
    @include rule--base;
  }

  @mixin type--medium($isFromMixin: false) {
    @if $isFromMixin == false {
      @include type--base(true);
      @include wide {
        @include rule--medium;
      }
    }
    @else {
      @include rule--medium;
    }
  }

  @mixin type--large($isFromMixin: false) {
    @if $isFromMixin == false {
      @include type--medium(true);
      @include wide {
        @include rule--large;
      }
    }
    @else {
      @include rule--large;
    }
  }

  @mixin type--xlarge($isFromMixin: false) {
    @if $isFromMixin == false {
      @include type--large(true);
      @include wide {
        @include rule--xlarge;
      }
    }
    @else {
      @include rule--xlarge;
    }
  }

  @mixin type--xxlarge($isFromMixin: false) {
    @if $isFromMixin == false {
      @include type--xlarge(true);
      @include wide {
        @include rule--xxlarge;
      }
    }
    @else {
      @include rule--xxlarge;
    }
  }

  @mixin type--huge($isFromMixin: false) {
    @if $isFromMixin == false {
      @include type--xxlarge(true);
      @include wide {
        @include rule--huge;
      }
    }
    @else {
      @include rule--huge;
    }
  }


  // LISTS
  @mixin bullet-type($bullet, $icon: false) {
    &::before {
      @if $icon {
        font-family: $fontIcon;
        @extend .#{$icon}::before;
        font-size: $fontSmall;
      }
      @else {
        content: $bullet;
        font-family: $fontHighlight;
      }

      display: block;
      font-weight: 400;
      position: absolute;
      top: 0;
      left: 0;
      line-height: $lineHeight;

    }
  }

  @mixin numbered-list() {
    &::before {
      counter-increment: list;
      content: '0' counter(list);
      color: inherit;
      font-weight: 400;
      display: inline-block;
      position: absolute;
      left: 0;
    }
  }

  // Mixin to create links
  @mixin style-cta($textColor, $linkIcon: false) {
    font-family: $fontHighlight;
    color: $textColor;
    font-weight: 400;
    display: inline-block;
    line-height: 1;

    &:hover {
      color: $colorGrayDark;
    }

    @if $linkIcon {
      text-decoration: none;
      &::before {
        display: inline-block;
        padding-right: 10px;
        font-family: $fontIcon;
        line-height: ($lineHeight) - 1; // remove 1px from line-height to fix baseline alignment
        font-size: $fontSmall;
        content: $linkIcon;
      }
    }
  }

  // Mixin to create highlight modules
  @mixin highlight-symbol($verticalOffset: 0, $horizontalOffset: 45px, $fontSize: 130px) {
    position: relative;

    &::before {
      display: none;

      @include medium {
        display: block;
        position: absolute;
        top: 106px;
        right: $horizontalOffset;

        font-family: $fontIcon;
        font-size: $fontSize;
        line-height: 1px;
        text-align: center;
        height: 100%;
        width: $mediumColWidth;
        color: #ffffff;
      }

      .highlight-module--left & {
        right: auto;
        left: $horizontalOffset;
      }

      @include wide {
        top: 134px;
        width: $wideColWidth;
        font-size: $fontSize + 50;

        .highlight-module--large & {
          font-size: $fontSize + 300;
        }
      }
    }
  }

  // Grid CSS rules
  @mixin rule--col($mediaQuery) {
    @if $mediaQuery == medium {
      float: left;
      margin-right: $mediumGutterWidth;
    }

    @if $mediaQuery == wide {
      float: left;
      margin-right: $wideGutterWidth;
    }
  }