.popoverWrapper {
  position: relative;
  width: fit-content;

  &[data-placement^='bottom'] {
    --_animation-orientation: -1;
  }
}

.popover {
  position: absolute;
  min-width: max(180px, 100%);
  translate: 0 0;
  opacity: 1;
  transition-duration: var(--grapes-transition-duration);
  transition-timing-function: var(--grapes-transition-timing-function);
  transition-property: opacity, translate;

  &[data-closing='true'] {
    opacity: 0;
    translate: 0 calc(var(--_animation-orientation, 1) * var(--grapes-unit-16));
  }
}

@starting-style {
  .popover {
    opacity: 0;
    translate: 0 calc(var(--_animation-orientation, 1) * var(--grapes-unit-16));
  }
}