.skw-hover-popover {
  position: absolute;
  z-index: 1050;
  min-width: 12rem;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: .65rem .72rem;
  border: 1px solid rgba(148, 163, 184, .18);
  border-radius: .75rem;
  background: #fff;
  box-shadow: 0 16px 30px rgba(15, 23, 42, .12);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .2s cubic-bezier(.23, 1, .32, 1), visibility .2s cubic-bezier(.23, 1, .32, 1), transform .2s cubic-bezier(.23, 1, .32, 1);
}

.skw-hover-popover.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.skw-hover-popover.is-interactive {
  pointer-events: auto;
}

.skw-hover-popover::after {
  content: '';
  position: absolute;
  left: var(--skw-popover-arrow-left, 1rem);
  width: .7rem;
  height: .7rem;
  border-right: 1px solid rgba(148, 163, 184, .18);
  border-bottom: 1px solid rgba(148, 163, 184, .18);
  background: #fff;
  transform: rotate(45deg);
}

.skw-hover-popover[data-placement="top"]::after {
  top: 100%;
  transform: translateY(-50%) rotate(45deg);
}

.skw-hover-popover[data-placement="bottom"]::after {
  bottom: 100%;
  transform: translateY(50%) rotate(225deg);
}

.skw-hover-popover.is-height-constrained {
  padding: 0;
  overflow: visible;
}

.skw-hover-popover.is-height-constrained.wl-team-workload-employee-workloads-popover {
  padding: 0;
}

.skw-hover-popover.is-height-constrained .skw-hover-popover__content {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: var(--skw-popover-content-max-height);
  max-height: var(--skw-popover-content-max-height);
  padding: .65rem .72rem;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: inherit;
  contain: paint;
}

.skw-hover-popover[data-placement="right"]::after {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%) rotate(135deg);
}

.skw-hover-popover[data-placement="left"]::after {
  top: 50%;
  right: 0;
  left: auto;
  transform: translate(50%, -50%) rotate(-45deg);
}

html[data-color-theme="dark"] .skw-hover-popover {
  border-color: rgba(148, 163, 184, .18);
  background: #162031;
  box-shadow: 0 18px 32px rgba(2, 6, 23, .28);
}

html[data-color-theme="dark"] .skw-hover-popover::after {
  border-color: rgba(148, 163, 184, .18);
  background: #162031;
}