.root {
  display: contents;
}

.content {
  max-height: calc(var(--radix-popover-content-available-height) - 2rem);
  max-width: calc(var(--radix-popover-content-available-width) - 2rem);
  outline: 2px solid transparent;
  outline-offset: 2px;

  &[data-state="open"] {
    animation-name: enter;
    animation-duration: 150ms;
    --enter-opacity: 0;
    --enter-scale: 0.95;
    --enter-rotate: initial;
    --enter-translate-x: initial;
    --enter-translate-y: initial;
  }

  &[data-state="closed"] {
    animation-name: exit;
    animation-duration: 150ms;
    --exit-opacity: 0;
    --exit-scale: 0.95;
    --exit-rotate: initial;
    --exit-translate-x: initial;
    --exit-translate-y: initial;
  }

  &[data-side="bottom"] {
    --enter-translate-y: -0.5rem;
  }

  &[data-side="top"] {
    --enter-translate-y: 0.5rem;
  }

  &[data-side="left"] {
    --enter-translate-x: 0.5rem;
  }

  &[data-side="right"] {
    --enter-translate-x: -0.5rem;
  }
}

@keyframes enter {
  from {
    opacity: var(--enter-opacity, 1);
    transform: translate3d(
        var(--enter-translate-x, 0),
        var(--enter-translate-y, 0),
        0
      )
      scale3d(
        var(--enter-scale, 1),
        var(--enter-scale, 1),
        var(--enter-scale, 1)
      )
      rotate(var(--enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: var(--exit-opacity, 1);
    transform: translate3d(
        var(--exit-translate-x, 0),
        var(--exit-translate-y, 0),
        0
      )
      scale3d(var(--exit-scale, 1), var(--exit-scale, 1), var(--exit-scale, 1))
      rotate(var(--exit-rotate, 0));
  }
}