/// Mixin - Fluid Type
/// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
/// Indrek Paas @indrekpaas
/// Inspired by Mike Riethmuller's Precise control over responsive typography
/// @link http://madebymike.com.au/writing/precise-control-responsive-typography/
/// @param $properties
/// @param $min-vw
/// @param $max-vw
/// @param $min-value
/// @param $max-value
@mixin fluid-type ($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

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

/// Center.
/// Center an element vertically or horizontally in its container,
/// and optionally horizontally. Option to undo.
/// @param $horizonally-center - center horizontally
/// @param $vertically-center - center vertically
/// @param $absolute-positioning - position absolutely, rather than relatively
/// @param $undo - undo vertical centering on an element it was previously applied to
@mixin center($horizontally: true, $vertically: true, $absolute: false, $undo: false) {
  display: inline-block;
  @if ($absolute) {
    position: absolute;
  } @else {
    position: relative;
  }
  @if ($horizontally == true and $vertically == true) {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }

  @if ($vertically == true and $horizontally == false) {
    top: 50%;
    transform: translateY(-50%);
  }

  @if ($horizontally == true and $vertically == false) {
    left: 50%;
    transform: translateX(-50%);
  }

  @if ($undo) {
    position: static;
    left: auto;
    transform: none;
  }
}

/// Mixin - Local Base
/// Set HTML font sizing base for global/local sizing (rem/em).
/// @link https://css-tricks.com/rem-global-em-local/
@mixin local-base() {
  font-size: 1rem; // 16px (default)
}

.local-base {
  @include local-base();
}

/// Word Wrap fix for long spaceless strings
/// @link https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@mixin word-wrap() {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/// Ellipsis fix for long spaceless strings
/// @link https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
@mixin ellipsis() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}