@use '../../_styles/mixin.scss' as *;

.o-popover {
  font-size: var(--popover-text-size);
  line-height: var(--popover-text-height);
  color: var(--popover-text-color);
}

.o-popover-anchor {
  border: var(--popup-bd);
  border-bottom: none;
  border-right: none;
  border-top-left-radius: 2px;
  width: 8px;
  height: 8px;
  background-color: var(--popup-bg-color);
}

.o-popup-pos-left,
.o-popup-pos-lb,
.o-popup-pos-lt {
  .o-popover-anchor {
    transform: translate(50%, -50%) rotate(135deg);
  }
}

.o-popup-pos-top,
.o-popup-pos-tl,
.o-popup-pos-tr {
  .o-popover-anchor {
    transform: translate(-50%, 50%) rotate(225deg);
  }
}

.o-popup-pos-right,
.o-popup-pos-rt,
.o-popup-pos-rb {
  .o-popover-anchor {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.o-popup-pos-bottom,
.o-popup-pos-bl,
.o-popup-pos-br {
  .o-popover-anchor {
    transform: translate(-50%, -50%) rotate(45deg);
  }
}