Sass Reusables

// Defaults
$base-font-size: 16px !default;
$base-respond-to-mobile: 767px !default;
$base-respond-to-tablet: 768px !default;
$base-respond-to-desktop: 769px !default;

// Requires Sass Math module for new division syntax
@use 'sass:math';

// Function for calculating rem.
// Ensure both numbers use the same unit.
@function rem($size, $base: $base-font-size) {
  @return #{math.div($size, $base)}rem;
}

// Function for calculating em.
// Ensure both numbers use the same unit.
@function em($size, $base: $base-font-size) {
  @return #{math.div($size, $base)}em;
}

// Font mixin
$font-intial-value: normal !default;
@mixin font($family: false, $size: false, $style: $font-intial-value, $weight: $font-intial-value, $variant: $font-intial-value, $spacing: false, $height: false, $shorthand: false) {
  @if $shorthand == true {
    @if $height {
      font: $style $variant $weight $size/#{$height} $family;
      font-size: rem($size);
    }
    @else {
      font: $style $variant $weight $size $family;
      font-size: rem($size);
    }
    @if $spacing {
      letter-spacing: $spacing;
    }
  }
@else {
    @if $family {
      font-family: $family;
    }
    @if $size {
      font-size: $size;
      font-size: rem($size);
    }
    @if $style != $font-intial-value {
      font-style: $style;
    }
    @if $weight != $font-intial-value {
      font-weight: $weight;
    }
    @if $variant != $font-intial-value {
      font-variant: $variant;
    }
    @if $spacing {
      letter-spacing: $spacing;
    }
    @if $height {
      line-height: $height;
    }
  }
}


// Web font mixin
@mixin wf-font($wf-family: false, $wf-size: false, $wf-style: $font-intial-value, $wf-weight: $font-intial-value, $wf-variant: $font-intial-value, $wf-spacing: false, $wf-height: false, $shorthand: false, $wf-hide: false) {
  @if $wf-hide == true {
    .wf-loading & {
      visibility: hidden;
    }
  }
  .wf-active & {
    @if $shorthand == true {
      @if $wf-height {
        font: $wf-style $wf-variant $wf-weight $wf-size/#{$wf-height} $wf-family;
        font-size: rem($wf-size);
      }
      @else {
        font: $wf-style $wf-variant $wf-weight $wf-size $wf-family;
        font-size: rem($wf-size);
      }
      @if $wf-spacing {
        letter-spacing: $wf-spacing;
      }
    }
    @else {
      @if $wf-family {
        font-family: $wf-family;
      }
      @if $wf-size {
        font-size: $wf-size;
        font-size: rem($wf-size);
      }
      @if $wf-style != $font-intial-value {
        font-style: $wf-style;
      }
      @if $wf-weight != $font-intial-value {
        font-weight: $wf-weight;
      }
      @if $wf-variant != $font-intial-value {
        font-variant: $wf-variant;
      }
      @if $wf-spacing {
        letter-spacing: $wf-spacing;
      }
      @if $wf-height {
        line-height: $wf-height;
      }
    }
  }
}


@mixin respond-to($device) {
  @if $device == mobile {
    @media only screen and (max-width: $base-respond-to-mobile) {
      @content;
    }
  }
  @if $device == tablet {
    @media only screen and (min-width: $base-respond-to-tablet) {
      @content;
    }
  }
  @if $device == desktop {
    @media only screen and (min-width: $base-respond-to-desktop) {
      @content;
    }
  }
}