// Calculates font size in REMs with a pixel fallback.
@mixin fontSize($size) {
  font-size: $size;
  font-size: calc-rem($size);
}

// ==========================================================================
// BEM Naming Functions
// ==========================================================================
// Element Mixin
@mixin e($element) {
  &__#{$element} {
    @content;
  }
}

// Modifier Mixin
@mixin m($modifier) {
  &--#{$modifier} {
    @content;
  }
}

// Generate ::before or ::after pseudo-element shapes
@mixin p-el($el-name, $h: 'null', $w: 'null') {
  @if $el-name == 'before' or $el-name == 'after' {
    &::#{$el-name} {
      @extend %pseudos;
      width: $w;
      height: $h;
      @content;
    }
  } @else {
    @error '"#{$el-name}" is not a valid pseudo element.';
  }
}

// ==========================================================================
// Media Query Functions
// ==========================================================================
@mixin media-q($break) {
  @if $break == 'small' {
    @media (min-width: map-get($breakpoints, 'xs')) and (max-width: map-get($breakpoints, 'md')) {
      @content;
    }
  } @else if $break == 'medium' {
    @media (min-width: map-get($breakpoints, 'md') + 1) {
      @content;
    }
  } @else if $break == 'large' {
    @media (min-width: map-get($breakpoints, 'lg')) {
      @content;
    }
  } @else if $break == 'x-large' {
    @media (min-width: map-get($breakpoints, 'xl')) {
      @content;
    }
  } @else if $break == 'xx-large' {
    @media (min-width: map-get($breakpoints, 'xxl')) {
      @content;
    }
  } @else {
    @error '"#{$break}" is not a valid breakpoint. Please enter a supported value (e.g. "small", "medium" or "large")';
  }
}