// SHAPES

@mixin square($size:1, $background:color(primary), $display:inline-block) {
  display: $display;
  height: size($size);
  width: size($size);
  background: $background;
}

@mixin circle($size:1, $background:color(primary), $display:inline-block) {
  @include square($size, $background, $display);
  border-radius: 50%;
}

// TODO:3 Review triangle, very confusing
// Triangle Mixin
// @include triangle(bottom, 1em, red);
// $p:position $s:size $c:color
// @mixin triangle($p, $s:1, $c:null) {
//
//   //use unitless function if no unit
//   @if ( unit($s) == '' ) {
//     $s: $s * 1em;
//   }
//
//   @include pseudo(after,0,0) {
//     @if ($p == up) {
//       @include center(horizontal);
//       border-left: $s solid transparent;
//       border-right: $s solid transparent;
//       border-bottom: $s solid $c;
//       top: - ($s - 0.03em);
//     } @else if ($p == bottom) {
//       @include center(horizontal);
//       border-left: $s solid transparent;
//       border-right: $s solid transparent;
//       border-top: $s solid $c;
//       bottom: - ($s - 0.03em);
//     } @else if ($p == right) {
//       @include center(vertical);
//       border-top: $s solid transparent;
//       border-bottom: $s solid transparent;
//       border-left: $s solid $c;
//       right: - ($s - 0.03em);
//     } @else if ($p == left) {
//       @include center(vertical);
//       border-top: $s solid transparent;
//       border-bottom: $s solid transparent;
//       border-right: $s solid $c;
//       left: - ($s - 0.03em);
//     }
//
//     @else {
//       @error "`#{$p}` is not valid, use up, left, right or bottom.";
//     }
//   }
// }