:host {
  --background: var(--l-color-surface-overlay);
  --color: inherit;
  --border-radius: 6px;
  --max-width: 320px;
  --shadow: var(--l-shadow-md);
  --arrow-size: 8px;
  --show-duration: 150ms;
  --hide-duration: 150ms;

  --_border-color: var(--l-color-border-overlay);

  display: contents;
}

[popover] {
  inset: unset;
  overflow: visible;
  isolation: isolate;
  box-sizing: border-box;
  width: max-content;
  max-width: var(--max-width);
  border: 1px solid var(--_border-color);
  border-radius: var(--border-radius);
  background: var(--background);
  color: var(--color);
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: var(--shadow);
}

:host([full-width]) [popover] {
  width: 100vw;
  max-width: none;
}

i {
  position: absolute;
  display: block;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background: var(--background);
  transform: rotate(45deg);
  z-index: -1;
}

:host([data-placement^='top']) i {
  border-right: 1px solid var(--_border-color);
  border-bottom: 1px solid var(--_border-color);
}

:host([data-placement^='bottom']) i {
  border-top: 1px solid var(--_border-color);
  border-left: 1px solid var(--_border-color);
}

:host([data-placement^='left']) i {
  border-right: 1px solid var(--_border-color);
  border-top: 1px solid var(--_border-color);
}

:host([data-placement^='right']) i {
  border-left: 1px solid var(--_border-color);
  border-bottom: 1px solid var(--_border-color);
}