@layer components {
  [data-popover] {
    @apply absolute
    bg-popover
    border
    min-w-full
    opacity-100
    overflow-x-hidden
    overflow-y-auto
    rounded-md
    scale-100
    shadow-md
    text-popover-foreground
    transition-all
    visible
    w-max
    z-50;

    &[aria-hidden="true"] {
      @apply invisible
      opacity-0
      scale-95;

      &:not([data-side]),
      &[data-side="bottom"] {
        @apply -translate-y-2;
      }
      &[data-side="top"] {
        @apply translate-y-2;
      }
      &[data-side="left"] {
        @apply translate-x-2;
      }
      &[data-side="right"] {
        @apply -translate-x-2;
      }
    }
    &:not([data-side]),
    &[data-side="bottom"] {
      @apply mt-1
      top-full;
    }
    &[data-side="top"] {
      @apply bottom-full
      mb-1;
    }
    &[data-side="left"] {
      @apply mr-1
      right-full;
    }
    &[data-side="right"] {
      @apply left-full
      ml-1;
    }
    &:not([data-side]),
    &[data-side="bottom"],
    &[data-side="top"] {
      &:not([data-align]),
      &[data-align="start"] {
        @apply left-0;
      }
      &[data-align="end"] {
        @apply right-0;
      }
      &[data-align="center"] {
        @apply -translate-x-1/2
        left-1/2;
      }
    }
    &[data-side="left"],
    &[data-side="right"] {
      &:not([data-align]),
      &[data-align="start"] {
        @apply top-0;
      }
      &[data-align="end"] {
        @apply bottom-0;
      }
      &[data-align="center"] {
        @apply -translate-y-1/2
        top-1/2;
      }
    }
  }
  .singlestage-popover {
    @apply inline-flex
    relative;

    [data-popover] {
      @apply p-4;
    }
  }
}
