/// Provides responsive font scaling for headings.
/// @group base
/// @author Richard Davis
/// @param {Number} $_font_scale - The factor by which to scale the font size
/// @example
///   @include heading-font-size(2);
@mixin heading-font-size($_font_scale) {
  font-size: font-scale($_font_scale) * 0.6;

  @include breakpoint-s {
    font-size: font-scale($_font_scale) * 0.7;
  }

  @include breakpoint-m {
    font-size: font-scale($_font_scale) * 0.8;
  }

  @include breakpoint-l {
    font-size: font-scale($_font_scale);
  }
}

/// Returns content wrapped in media query targeting the specified viewport size.
/// @group base
/// @author Richard Davis
/// @param {String} $_viewport_size - The size of the viewport to target
/// @example
///   @include breakpoint(500px) {
///     width: 50%;
///   }
@mixin breakpoint($_viewport_size) {
  @media screen and (min-width: #{$_viewport_size}) {
    @content;
  }
}

/// Returns content wrapped in media query targeting a mapped viewport size.
/// @group base
/// @author Richard Davis
/// @param {String} $_key - The key to return an associated viewport size for.
/// @example
///   @include breakpoint-mapped('L') {
///     color: black;
///   }
@mixin breakpoint-mapped($_key) {
  @if map-has-key($viewport-sizes, $_key) {
    @media screen and (min-width: #{viewport-size($_key)}) {
      @content;
    }
  }

  @else {
    @error "Key provided not found in $viewport-sizes map.";
  }
}

/// Returns content wrapped in media query targeting small screens and up
/// @group base
/// @author Richard Davis
/// @example
///   @include breakpoint-s {
///     width: 80%;
///   }
@mixin breakpoint-s {
  @include breakpoint-mapped("S") {
    @content;
  }
}

/// Returns content wrapped in media query targeting medium screens and up
/// @group base
/// @author Richard Davis
/// @example
///   @include breakpoint-m {
///     width: 75%;
///   }
@mixin breakpoint-m {
  @include breakpoint-mapped("M") {
    @content;
  }
}

/// Returns content wrapped in media query targeting large screens and up
/// @group base
/// @author Richard Davis
/// @example
///   @include breakpoint-l {
///     width: 50%;
///   }
@mixin breakpoint-l {
  @include breakpoint-mapped("L") {
    @content;
  }
}

/// Returns content wrapped in media query targeting extra large screens and up
/// @group base
/// @author Richard Davis
/// @example
///   @include breakpoint-xl {
///     width: 30%;
///   }
@mixin breakpoint-xl {
  @include breakpoint-mapped("XL") {
    @content;
  }
}

/// Provides a top border accent.
/// @group base
/// @author Richard Davis
/// @example
///   @include top-border-accent($black, grayscale-color(40));
@mixin top-border-accent($_accent_color, $_border_color) {
  border-width: 5px 1px 1px 1px;
  border-color: $_accent_color $_border_color $_border_color $_border_color;
}

/// Provides a top border accent.
/// @group base
/// @author Richard Davis
/// @example
///   @include right-border-accent($black, grayscale-color(40));
@mixin right-border-accent($_accent_color, $_border_color) {
  border-width: 1px 5px 1px 1px;
  border-color: $_border_color $_accent_color $_border_color $_border_color;
}

/// Provides a top border accent.
/// @group base
/// @author Richard Davis
/// @example
///   @include bottom-border-accent($black, grayscale-color(40));
@mixin bottom-border-accent($_accent_color, $_border_color) {
  border-width: 1px 1px 5px 1px;
  border-color: $_border_color $_border_color $_accent_color $_border_color;
}

/// Provides a top border accent.
/// @group base
/// @author Richard Davis
/// @example
///   @include left-border-accent($black, grayscale-color(40));
@mixin left-border-accent($_accent_color, $_border_color) {
  border-width: 1px 1px 1px 5px;
  border-color: $_border_color $_border_color $_border_color $_accent_color;
}