@keyframes tooltipFadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.navds-tooltip {
  z-index: var(--a-z-index-tooltip);
  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
  border-radius: var(--a-border-radius-small);
  padding: 0 var(--a-spacing-2);
  align-items: center;
  filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
  display: flex;
  flex-direction: column;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.2s;
  animation-name: tooltipFadeIn;
  text-align: center;
}

.navds-tooltip__arrow {
  height: 0.4375rem;
  width: 0.4375rem;
  transform: rotate(45deg);
  z-index: -1;
  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
  position: absolute;
}

.navds-tooltip__keys {
  padding-bottom: var(--a-spacing-1);
  display: flex;
  gap: var(--a-spacing-1);
}

.navds-tooltip__key {
  font-family: var(--a-font-family);
  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
  border-radius: var(--a-border-radius-small);
  padding: 0 var(--a-spacing-1);
  min-width: 1.125rem;
  height: 1.125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (forced-colors: active) {
  .navds-tooltip {
    --__a-tooltip-high-contrast-border: 1px solid transparent;

    border: var(--__a-tooltip-high-contrast-border);
  }

  .navds-tooltip[data-side="top"] .navds-tooltip__arrow {
    border-bottom: var(--__a-tooltip-high-contrast-border);
    border-right: var(--__a-tooltip-high-contrast-border);
  }

  .navds-tooltip[data-side="right"] .navds-tooltip__arrow {
    border-bottom: var(--__a-tooltip-high-contrast-border);
    border-left: var(--__a-tooltip-high-contrast-border);
  }

  .navds-tooltip[data-side="bottom"] .navds-tooltip__arrow {
    border-left: var(--__a-tooltip-high-contrast-border);
    border-top: var(--__a-tooltip-high-contrast-border);
  }

  .navds-tooltip[data-side="left"] .navds-tooltip__arrow {
    border-top: var(--__a-tooltip-high-contrast-border);
    border-right: var(--__a-tooltip-high-contrast-border);
  }
}
