/// Uses clip path to change an element to the shape of a hexagon.
///
/// @param {Number} $size [15rem] - The height and width of the element.
/// @param {Color | Mixed} $bg [#80f] - Can be any value that is valid for the
/// background shorthand property.
///
/// @group Shapes
@mixin hexagon($size: 15rem, $bg: #80f) {
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

  @if $size {
    width: $size;
    height: $size;
  }

  @if $bg {
    background: $bg;
  }
}