/// Uses clip path to change an element to a Christian cross shape.
///
/// @param {Number} $size [15rem] - The height and width.
/// @param {Color | Mixed} $bg [#80f] The color or background value
///
/// @group Shapes
@mixin cross($size: 15rem, $bg: #80f) {
  clip-path: polygon(
    10% 25%,
    35% 25%,
    35% 0,
    65% 0,
    65% 25%,
    90% 25%,
    90% 50%,
    65% 50%,
    65% 100%,
    35% 100%,
    35% 50%,
    10% 50%
  );

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

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