/// Uses clip path to cut out the center of an element and leave a border frame.
/// Among other things, you can use this mixin as the child element to an image
/// element or an element with an image background to frame the parent element.
///
/// @param {Color | Mixed} $bg [#80f] The color or background value.
/// @param {Number} $size [15rem] - The size of the frame.
/// If the $height property is not set explicitly, it is both height and width,
/// if $height is set explicitly, then this value sets only the width.
/// @param {Number} $height [$size] The height of the frame.
///
/// @group Shapes
///
/// @throw Invalid $direction value
@mixin frame($size: 15rem, $bg: #80f, $height: $size) {
  clip-path: polygon(
    0 0,
    0 100%,
    20% 100%,
    20% 20%,
    80% 20%,
    80% 80%,
    20% 80%,
    20% 100%,
    100% 100%,
    100% 0
  );

  @if $size {
    width: $size;
  }

  @if $height {
    height: $height;
  }

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