/* ------------------------------------------------------------------------ *\
   mixins.util.shape
\* ------------------------------------------------------------------------ */


/**
 * [rectangle description]
 * @param  {[type]} width  [description]
 * @param  {[type]} height [description]
 * @param  {[type]} color  [description]
 * @return {[type]}        [description]
 */
u-shape--rectangle(width, height, color)
  width: width
  height: height
  background: color


/**
 * [parallelogram description]
 * @param  {[type]} width  [description]
 * @param  {[type]} height [description]
 * @param  {[type]} skew   [description]
 * @param  {[type]} color  [description]
 * @return {[type]}        [description]
 */
u-shape--parallelogram(width, height, skew, color)
  u-shape--rectangle(width, height, color)
  -webkit-transform: skew(skew)
  -moz-transform: skew(skew)
  -ms-transform: skew(skew)
  -o-transform: skew(skew)
  transform: skew(skew)


/**
 * [square description]
 * @param  {[type]} size  [description]
 * @param  {[type]} color [description]
 * @return {[type]}       [description]
 */
u-shape--square(size, color)
  u-shape--rectangle(size, size, color)


/**
 * [oval description]
 * @param  {[type]} width  [description]
 * @param  {[type]} height [description]
 * @param  {[type]} color  [description]
 * @return {[type]}        [description]
 */
u-shape--oval(width, height, color)
  width: width
  height: height
  -webkit-border-radius: width / height
  -moz-border-radius: width / height
  border-radius: width / height
  background: color


/**
 * [circle description]
 * @param  {[type]} size  [description]
 * @param  {[type]} color [description]
 * @return {[type]}       [description]
 */
u-shape--circle(size, color)
  u-shape--square(size, color)
  -webkit-border-radius: size / 2
  -moz-border-radius: size / 2
  border-radius: size / 2


/**
 * [triangle description]
 * @param  {[type]} size       [description]
 * @param  {[type]} color      [description]
 * @param  {[type]} direction: "up"          [description]
 * @return {[type]}            [description]
 */
u-shape--triangle(size, color, direction = "up")
  width: 0
  height: 0

  if direction == "up"
    border-right: size solid transparent
    border-bottom: size * 1.2 solid color
    border-left: size solid transparent

  else if direction == "down"
    border-top: size * 1.2 solid color
    border-right: size solid transparent
    border-left: size solid transparent

  else if direction == "left"
    border-top: size solid transparent
    border-right: size * 1.2 solid color
    border-bottom: size solid transparent

  else if direction == "right"
    border-top: size solid transparent
    border-bottom: size solid transparent
    border-left: size * 1.2 solid color


/**
 * [corner description]
 * @param  {[type]} size    [description]
 * @param  {[type]} color   [description]
 * @param  {[type]} corner: "top-left"    [description]
 * @return {[type]}         [description]
 */
u-shape--triangle--corner(size, color, corner = "top-left")
  width: 0
  height: 0

  if corner == "top-left"
    border-top: size solid color
    border-right: size solid transparent

  else if corner == "top-right"
    border-top: size solid color
    border-left: size solid transparent

  else if corner == "bottom-left"
    border-right: size solid transparent
    border-bottom: size solid color

  else if corner == "bottom-right"
    border-bottom: size solid color
    border-left: size solid transparent


/**
 * [trapezoid description]
 * @param  {[type]} width [description]
 * @param  {[type]} color [description]
 * @return {[type]}       [description]
 */
u-shape--trapezoid(width, color)
  width: width
  height: 0
  border-right: width / 2 solid transparent
  border-bottom: width solid color
  border-left: width / 2 solid transparent


/**
 * [chevron description]
 * @param  {[type]} width      [description]
 * @param  {[type]} height     [description]
 * @param  {[type]} skew       [description]
 * @param  {[type]} color      [description]
 * @param  {[type]} direction: "up"          [description]
 * @return {[type]}            [description]
 */
u-shape--chevron(width, height, skew, color, direction = "up")
  position: relative
  width: width
  height: height

  if direction == "down"
    -webkit-transform: rotate(180deg)
    -moz-transform: rotate(180deg)
    -ms-transform: rotate(180deg)
    -o-transform: rotate(180deg)
    transform: rotate(180deg)

  else if direction == "left"
    -webkit-transform: rotate(-90deg)
    -moz-transform: rotate(-90deg)
    -ms-transform: rotate(-90deg)
    -o-transform: rotate(-90deg)
    transform: rotate(-90deg)

  else if direction == "right"
    -webkit-transform: rotate(90deg)
    -moz-transform: rotate(90deg)
    -ms-transform: rotate(90deg)
    -o-transform: rotate(90deg)
    transform: rotate(90deg)

  &:before, &:after
    position: absolute
    top: 0
    width: 50%
    height: 100%
    background: color
    content: ""

  &:before
    left: 0
    -webkit-transform: skew(0deg, skew)
    -moz-transform: skew(0deg, skew)
    -ms-transform: skew(0deg, skew)
    -o-transform: skew(0deg, skew)
    transform: skew(0deg, skew)

  &:after
    right: 0
    -webkit-transform: skew(0deg, -skew)
    -moz-transform: skew(0deg, -skew)
    -ms-transform: skew(0deg, -skew)
    -o-transform: skew(0deg, -skew)
    transform: skew(0deg, -skew)