.popover {
  position: relative;
  display: flex;
  box-sizing: border-box;
  font-family: var(--font-family-base);
  filter: drop-shadow(var(--shadow-4));
  --pop-arrow-offset: var(--spacing-8);
  --popover-bg: var(--color-gray-0);
  --popover-border: var(--color-gray-100);
  --popover-arrow-stroke: var(--popover-border);
}
.popover--large { --pop-arrow-offset: 18px; }

.popover__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 160px;
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--radius-4);
  background: var(--popover-bg);
  box-shadow: 0 0 0 1px var(--popover-border);
  word-break: break-word;
}
.popover--large .popover__content {
  gap: var(--spacing-4);
  max-width: 280px;
  padding: var(--spacing-12) var(--spacing-16);
  border-radius: var(--radius-8);
}

.popover__title { color: var(--color-gray-900); }
.popover__text  { color: var(--color-gray-500); white-space: nowrap; }

.popover__arrow {
  position: relative;
  z-index: 2;
  display: flex;
  flex: none;
  overflow: hidden;
}
.popover__arrow-shape { position: relative; flex: none; }

.popover__arrow-shape svg {
  position: absolute;
  top: -1px;
  left: -1px;
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
}

.popover__arrow-shape svg path {
  fill: var(--popover-bg);
  stroke: var(--popover-arrow-stroke);
}
.popover__content { position: relative; z-index: 1; }

.popover--top-left,
.popover--top-center,
.popover--top-right { flex-direction: column; }

.popover--bottom-left,
.popover--bottom-center,
.popover--bottom-right { flex-direction: column-reverse; }

.popover--top-left .popover__arrow,
.popover--top-center .popover__arrow,
.popover--top-right .popover__arrow,
.popover--bottom-left .popover__arrow,
.popover--bottom-center .popover__arrow,
.popover--bottom-right .popover__arrow { align-self: stretch; }

.popover--top-left .popover__arrow-shape,
.popover--top-center .popover__arrow-shape,
.popover--top-right .popover__arrow-shape,
.popover--bottom-left .popover__arrow-shape,
.popover--bottom-center .popover__arrow-shape,
.popover--bottom-right .popover__arrow-shape { width: 8px; height: 4px; }

.popover--top-left .popover__arrow,
.popover--top-center .popover__arrow,
.popover--top-right .popover__arrow { padding-top: 2px; }

.popover--bottom-left .popover__arrow,
.popover--bottom-center .popover__arrow,
.popover--bottom-right .popover__arrow { padding-bottom: 2px; }

.popover--bottom-left .popover__arrow-shape svg,
.popover--bottom-center .popover__arrow-shape svg,
.popover--bottom-right .popover__arrow-shape svg { transform: scaleY(-1); }

.popover--top-center .popover__arrow,
.popover--bottom-center .popover__arrow { justify-content: center; }

.popover--top-left .popover__arrow,
.popover--bottom-left .popover__arrow {
  justify-content: flex-start;
  padding-left: var(--pop-arrow-offset);
}
.popover--top-right .popover__arrow,
.popover--bottom-right .popover__arrow {
  justify-content: flex-end;
  padding-right: var(--pop-arrow-offset);
}

.popover--left  { flex-direction: row; align-items: stretch; }
.popover--right { flex-direction: row-reverse; align-items: stretch; }

.popover--left .popover__arrow,
.popover--right .popover__arrow { align-items: center; }

.popover--left .popover__arrow-shape,
.popover--right .popover__arrow-shape { width: 4px; height: 8px; }

.popover--left .popover__arrow  { padding-left: 2px; }
.popover--right .popover__arrow { padding-right: 2px; }

.popover--left .popover__arrow-shape svg { transform: scaleX(-1); }