@forward '../../styles/variables' as vars-*;
@forward '../../styles/mixins/hacks' as hacks-*;
@forward '../../styles/mixins/color-modes' as color-modes-*;
@use '../../styles/mixins/color-modes' as color-modes;

// Draw a triangle towards given direction
// @mixin popover-arrow($direction, $size, $color)
//
// @direction: top | right | bottom | left
// @size:      Size (height) of the triangle
// @color:     Filling color of the triangle

@mixin popover-arrow($direction, $size, $color) {
  @if $direction == top {
    top: -$size;
    margin-inline-start: -$size;
    border-width: 0 $size $size;
    border-bottom-color: $color;
  } @else if $direction == bottom {
    bottom: -$size;
    margin-inline-start: -$size;
    border-width: $size $size 0;
    border-top-color: $color;
  } @else if $direction == right {
    right: -$size;
    margin-top: -$size;
    border-width: $size 0 $size $size;
    border-left-color: $color;
  } @else if $direction == left {
    left: -$size;
    margin-top: -$size;
    border-width: $size $size $size 0;
    border-right-color: $color;
  }
}

// Append Popover's arrow to Popover
// @direction: The arrow's pointing direction. It's usually opposite of popover's placement
//             e.g. popover[placement="top"] has an arrow[direction="bottom"]
// @size:      The arrow's size (height)
// @bg:        The arrow's background color, usually equal to popover's background
// @border:    The arrow's border color, usually equal to popover's border (which only take effect
//             in high-contrast theme)
@mixin with-popover-arrow($direction, $size: 6px, $bg: var(--rs-bg-overlay), $border: var(--rs-border-primary)) {
  &::after {
    @include popover-arrow($direction, $size, $bg);
  }

  @include color-modes.high-contrast-mode {
    &::before {
      @include popover-arrow($direction, $size + 1px, $border);
    }
  }
}