// =============================================================================
// Border radius
// =============================================================================

@mixin border-radius($radius) {
  border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

// =============================================================================
// Rotate
// =============================================================================

@mixin rotate($deg) {
  -ms-transform: rotate($deg);
  -webkit-transform: rotate($deg);
  transform: rotate($deg);
}

// =============================================================================
// Hover transition
// =============================================================================

@mixin hover-transition() {
  -webkit-transition: linear 0.25s;
  -moz-transition: linear 0.25s;
  -o-transition: linear 0.25s;
  -ms-transition: linear 0.25s;
  transition: linear 0.25s;
}

// =============================================================================
// Scale
// =============================================================================

@mixin scale($size) {
  -webkit-transform: $size;
  -moz-transform: $size;
  -ms-transform: $size;
  -o-transform: $size;
  transform: $size;
}

// =============================================================================
// Px to rm
// =============================================================================

$browser-context: 16;

@function rem($pixels, $context: $browser-context) {
  @return #{$pixels/$context}rem;
}

// =============================================================================
// Unit less line height
// =============================================================================

@function line-height($font-size, $line-height: $font-size) {
  @return $line-height/$font-size;
}

// =============================================================================
// String Replace
// =============================================================================

@function str-replace($string, $search, $replace: "") {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

// =============================================================================
// Font Face
// =============================================================================

@mixin font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg) {
  $src: null;

  $extmods: (
    eot: "?",
    svg: "#" + str-replace($name, " ", "_"),
  );

  $formats: (
    otf: "opentype",
    ttf: "truetype",
  );

  @each $ext in $exts {
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext);
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext);
    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma);
  }

  @font-face {
    font-family: quote($name);
    font-style: $style;
    font-weight: $weight;
    src: $src;
  }
}

// =============================================================================
// Breakpoint viewport sizes and media queries.
// =============================================================================

@mixin media-breakpoint-up($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: #{map-get($breakpoints, $breakpoint)}) {
      @content;
    }
  } @else {
    @media (min-width: #{$breakpoint}) {
      @content;
    }
  }
}

@mixin media-breakpoint-down($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: #{map-get($breakpoints, $breakpoint) - 0.02}) {
      @content;
    }
  } @else {
    @media (max-width: #{$breakpoint - 0.02}) {
      @content;
    }
  }
}

@mixin media-breakpoint-between($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: #{map-get($breakpoints, $breakpoint) - 0.02}) {
      @content;
    }
  } @else {
    @media (max-width: #{$breakpoint - 0.02}) {
      @content;
    }
  }
}

@mixin media-breakpoint-between($lower, $upper) {
  @if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
    $lower-breakpoint: map-get($breakpoints, $lower);
    $upper-breakpoint: map-get($breakpoints, $upper);
    @media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 0.02)) {
      @content;
    }
  } @else {
    @media (min-width: $lower) and (max-width: ($upper - 0.02)) {
      @content;
    }
  }
}

// Ascending
// Used to evaluate Sass maps like our grid breakpoints.
@mixin _assert-ascending($map, $map-name) {
  $prev-key: null;
  $prev-num: null;
  @each $key, $num in $map {
    @if $prev-num == null {
      // Do nothing
    } @else if not comparable($prev-num, $num) {
      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    } @else if $prev-num >= $num {
      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
    }
    $prev-key: $key;
    $prev-num: $num;
  }
}

// Starts at zero
// Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
@mixin _assert-starts-at-zero($map) {
  $values: map-values($map);
  $first-value: nth($values, 1);
  @if $first-value != 0 {
    @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
  }
}

@mixin make-padding-spacing-utilities($spacing-name, $spacing-multiplier) {
  .p-#{$spacing-name} {
    padding-top: $spacing-base-value * $spacing-multiplier !important;
    padding-bottom: $spacing-base-value * $spacing-multiplier !important;
  }

  .p-t-#{$spacing-name} {
    padding-top: $spacing-base-value * $spacing-multiplier !important;
  }

  .p-b-#{$spacing-name} {
    padding-bottom: $spacing-base-value * $spacing-multiplier !important;
  }
  .p-r-#{$spacing-name} {
    padding-right: $spacing-base-value * $spacing-multiplier !important;
  }
  .p-l-#{$spacing-name} {
    padding-left: $spacing-base-value * $spacing-multiplier !important;
  }
}

@mixin make-margin-spacing-utilities($spacing-name, $spacing-multiplier) {
  .m-#{$spacing-name} {
    margin-top: $spacing-base-value * $spacing-multiplier !important;
    margin-bottom: $spacing-base-value * $spacing-multiplier !important;
  }

  .m-t-#{$spacing-name} {
    margin-top: $spacing-base-value * $spacing-multiplier !important;
  }

  .m-b-#{$spacing-name} {
    margin-bottom: $spacing-base-value * $spacing-multiplier !important;
  }

  .m-r-#{$spacing-name} {
    margin-right: $spacing-base-value * $spacing-multiplier !important;
  }

  .m-l-#{$spacing-name} {
    margin-left: $spacing-base-value * $spacing-multiplier !important;
  }
}