// =============================================================================
// _ARROWS.SCSS
// -----------------------------------------------------------------------------
// Global SCSS mixins.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Tooltip and Popover Arrows
// =============================================================================

// Tooltip and Popover Arrows
// =============================================================================

@mixin popover-arrow-top($arrowWidth: 5px, $color: $black) {
  bottom: 0;
  left: 50%;
  margin-left: -$arrowWidth;
  border-left: $arrowWidth solid transparent;
  border-right: $arrowWidth solid transparent;
  border-top: $arrowWidth solid $color;
}

@mixin popover-arrow-left($arrowWidth: 5px, $color: $black) {
  top: 50%;
  right: 0;
  margin-top: -$arrowWidth;
  border-top: $arrowWidth solid transparent;
  border-bottom: $arrowWidth solid transparent;
  border-left: $arrowWidth solid $color;
}

@mixin popover-arrow-bottom($arrowWidth: 5px, $color: $black) {
  top: 0;
  left: 50%;
  margin-left: -$arrowWidth;
  border-left: $arrowWidth solid transparent;
  border-right: $arrowWidth solid transparent;
  border-bottom: $arrowWidth solid $color;
}

@mixin popover-arrow-right($arrowWidth: 5px, $color: $black) {
  top: 50%;
  left: 0;
  margin-top: -$arrowWidth;
  border-top: $arrowWidth solid transparent;
  border-bottom: $arrowWidth solid transparent;
  border-right: $arrowWidth solid $color;
}