@ozen-ui/kit/__inner__/esm/components/Popover/Popover.css

React component library

.Popover {
  outline: none;
  inline-size: auto;
  box-sizing: border-box;
  z-index: var(--z-index-popover);
}

  .Popover-Arrow {
    --popover-arrow-inset: calc(-1 * (var(--popover-arrow-size) / 2));
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    inline-size: var(--popover-arrow-size);
    block-size: var(--popover-arrow-size);
    color: var(--paper-background-color);
  }

  .Popover-Arrow_size_xs {
        --popover-arrow-size: 12px;
      }

  .Popover-Arrow_size_s {
        --popover-arrow-size: 16px;
      }

  .Popover[data-popper-placement^='top'] > .Popover-Arrow {
    transform: rotate(270deg);
    inset-block-end: var(--popover-arrow-inset);
  }

  .Popover[data-popper-placement^='bottom'] > .Popover-Arrow {
    transform: rotate(90deg);
    inset-block-start: var(--popover-arrow-inset);
  }

  .Popover[data-popper-placement^='left'] > .Popover-Arrow {
    transform: rotate(180deg);
    inset-inline-end: var(--popover-arrow-inset);
  }

  .Popover[data-popper-placement^='right'] > .Popover-Arrow {
    inset-inline-start: var(--popover-arrow-inset);
  }

  .Popover_disableInteractive {
    pointer-events: none;
  }

.Popover_animation-enter {
    opacity: 0;
  }

.Popover_animation-enter-active {
    opacity: 1;
    transition: opacity var(--transition-default);
  }

.Popover_animation-enter-done {
    opacity: 1;
  }

.Popover_animation-exit {
    opacity: 1;
  }

.Popover_animation-exit-active {
    opacity: 0;
    transition: opacity var(--transition-default);
  }

.Popover_animation-exit-done {
    opacity: 0;
  }