// Mixins.less
// Snippets of reusable CSS to develop faster and keep code readable
// -----------------------------------------------------------------

// Popover arrows
// -------------------------
// For popovers
@mixin top($arrowWidth: 9px, $color: $white) {
  bottom: 0;
  left: 50%;
  margin-bottom: -$arrowWidth + 6px;
  margin-left: -$arrowWidth;
  border-left: $arrowWidth solid transparent;
  border-right: $arrowWidth solid transparent;
  border-top: $arrowWidth solid $color;
}
@mixin left($arrowWidth: 9px, $color: $white) {
  top: 50%;
  right: 0;
  margin-right: -$arrowWidth + 6px;
  margin-top: -$arrowWidth;
  border-top: $arrowWidth solid transparent;
  border-bottom: $arrowWidth solid transparent;
  border-left: $arrowWidth solid $color;
}
@mixin bottom($arrowWidth: 9px, $color: $white) {
  top: 0;
  left: 50%;
  margin-top: -$arrowWidth + 6px;
  margin-left: -$arrowWidth;
  border-left: $arrowWidth solid transparent;
  border-right: $arrowWidth solid transparent;
  border-bottom: $arrowWidth solid $color;
}
@mixin right($arrowWidth: 9px, $color: $white) {
  top: 50%;
  left: 0;
  margin-left: -$arrowWidth + 6px;
  margin-top: -$arrowWidth;
  border-top: $arrowWidth solid transparent;
  border-bottom: $arrowWidth solid transparent;
  border-right: $arrowWidth solid $color;
  border-color: transparent $color;
}