.kz-popover {
  position: relative;
  width: fit-content;
}

.kz-popover div {
  background: var(--color-klezmer-earth--tint-70);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2),
    0px 0px 60px 0px rgba(0, 0, 0, 0.2);
  color: var(--color-klezmer-earth);
  display: none;
  padding: var(--space-s);
  position: absolute;
  width: min(100%, 320px);
}
.kz-popover div::after {
  border-style: solid;
  border-width: 8px;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}
.kz-popover div.show {
  display: block;
}

.kz-popover div[data-popover-position='top'] {
  margin-block-end: var(--space-s);
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.kz-popover div[data-popover-position='top']::after {
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-color: var(--color-klezmer-earth--tint-70) transparent transparent
    transparent;
}

.kz-popover div[data-popover-position='right'] {
  margin-inline-start: var(--space-s);
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.kz-popover div[data-popover-position='right']::after {
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent var(--color-klezmer-earth--tint-70) transparent
    transparent;
}

.kz-popover div[data-popover-position='bottom'] {
  margin-block-start: var(--space-s);
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.kz-popover div[data-popover-position='bottom']::after {
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  border-color: transparent transparent var(--color-klezmer-earth--tint-70)
    transparent;
}

.kz-popover div[data-popover-position='left'] {
  margin-inline-end: var(--space-s);
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
}
.kz-popover div[data-popover-position='left']::after {
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  border-color: transparent transparent transparent
    var(--color-klezmer-earth--tint-70);
}