@import '../var.less';
@import '../transition.less';

.f-popover-content {
  border: 1px solid;
  border-radius: 8px;
  position: relative;
} 
.f-popover-content-light {
  background-color: @light-color;
  border-color: @gray-15;
}
.f-popover-arrow-light::before {
  background-color: @light-color;
}
.f-popover-content-dark {
  background-color: #303133;
  border: none;
  color: #ffffff;
}
.f-popover-arrow-dark::before {
  background-color: #303133;
}

.f-popover-arrow,
.f-popover-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 1px;
}
.f-popover-arrow::before {
  content: '';
  transform: rotate(45deg);
}

.f-popover-content[data-popper-placement^='top'] > .f-popover-arrow {
  bottom: -4px;
  // default position
  left: 50%;
  transform: translateX(-50%);
  &::before {
    border-style: solid;
    border-left: 0;
    border-top: 0;
    border-color: #dfdfde;
  }
}
.f-popover-content[data-popper-placement^='bottom'] > .f-popover-arrow {
  top: -4px;
  // default position
  left: 50%;
  transform: translateX(-50%);
}
.f-popover-content[data-popper-placement^='left'] > .f-popover-arrow {
  right: -4px;
  // default position
  top: 50%;
  transform: translateY(-50%);
}
.f-popover-content[data-popper-placement^='right'] > .f-popover-arrow {
  left: -4px;
  // default position
  top: 50%;
  transform: translateY(-50%);
}