.navds-popover {
  z-index: var(--a-z-index-popover);
  background-color: var(--ac-popover-bg, var(--a-surface-default));
  box-shadow: var(--a-shadow-medium);
  border: 1px solid;
  border-color: var(--ac-popover-border, var(--a-border-default));
  border-radius: var(--a-border-radius-large);
  max-width: calc(100vw - var(--a-spacing-6));
}

.navds-popover__content {
  padding: var(--a-spacing-4);
}

.navds-popover--hidden {
  display: none;
}

.navds-popover:focus-visible {
  outline: none;
  box-shadow: var(--a-shadow-focus);
}

@supports not selector(:focus-visible) {
  .navds-popover:focus {
    outline: none;
    box-shadow: var(--a-shadow-focus);
  }
}

.navds-popover__arrow {
  position: absolute;
  z-index: -1;
  transform: rotate(45deg);
  background-color: var(--ac-popover-bg, var(--a-surface-default));
  border: 1px solid;
  border-color: var(--ac-popover-border, var(--a-border-default));
  width: 1rem;
  height: 1rem;
}

.navds-popover[data-placement^="top"] > .navds-popover__arrow {
  border-left-color: transparent;
  border-top-color: transparent;
}

/* prettier-ignore */
.navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.navds-popover[data-placement^="left"] > .navds-popover__arrow {
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.navds-popover[data-placement^="right"] > .navds-popover__arrow {
  border-right-color: transparent;
  border-top-color: transparent;
}

@media (forced-colors: active) {
  .navds-popover[data-placement^="top"] > .navds-popover__arrow {
    border-left-color: canvas;
    border-top-color: canvas;
  }

  /* prettier-ignore */
  .navds-popover[data-placement^="bottom"] > .navds-popover__arrow {
    border-bottom-color: canvas;
    border-right-color: canvas;
  }

  .navds-popover[data-placement^="left"] > .navds-popover__arrow {
    border-left-color: canvas;
    border-bottom-color: canvas;
  }

  .navds-popover[data-placement^="right"] > .navds-popover__arrow {
    border-right-color: canvas;
    border-top-color: canvas;
  }
}
