.o-popover {
  --popup-bg-color: var(--o-color-fill2);
  --popup-shadow: var(--o-shadow-1);
  --popup-radius: var(--o-radius_control-s);
  --popup-bd: 1px solid var(--o-color-control4);
  --popup-padding: 9px 16px;
  --popover-text-color: var(--o-color-info1);
  --popover-text-size: var(--o-font_size-tip1);
  --popover-text-height: var(--o-line_height-tip1);
}

.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-popover-anchor,
.o-popup-pos-lb .o-popover-anchor,
.o-popup-pos-lt .o-popover-anchor {
  transform: translate(50%, -50%) rotate(135deg);
}

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

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

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

@media (max-width: 1680px) {
  .o-popover {
    --popover-text-size: var(--o-font_size-tip2);
    --popover-text-height: var(--o-line_height-tip2);
    --popup-padding: 7px 12px;
  }
}