site/src/styles/ak-popover.css
/**
 * Copyright 2025-present Ariakit FZ-LLC. All Rights Reserved.
 *
 * This software is proprietary. See the license.md file in the root of this
 * package for licensing terms.
 *
 * SPDX-License-Identifier: UNLICENSED
 */
@utility ak-popover_idle {
  --ak-popover-ring-color: var(--ak-ring, var(--ak-layer-ring));
  transition-property: overlay, display, scale, opacity;
  @apply ak-layer ak-frame-force-dialog ak-light:ring ak-dark:ak-frame-border ak-light:border-none;
  @apply transition-discrete z-10 shadow-xl;
  @variant backdrop {
    transition-property: overlay, display, opacity;
  }
}

@utility ak-popover_starting-style {
  @apply scale-95 opacity-0;
}

@utility ak-popover_open {
  @apply starting:ak-popover_starting-style duration-500;
  /* https://easingwizard.com */
  @apply ease-[linear(0,_0.008_1.1%,_0.031_2.2%,_0.129_4.8%,_0.257_7.2%,_0.671_14.2%,_0.789_16.5%,_0.881_18.6%,_0.957_20.7%,_1.019_22.9%,_1.063_25.1%,_1.094_27.4%,_1.114_30.7%,_1.112_34.5%,_1.018_49.9%,_0.99_59.1%,_1)];
  @variant backdrop {
    @apply duration-250 opacity-100;
  }
}

@utility ak-popover_closed {
  @apply duration-250 scale-95 opacity-0;
  @variant backdrop {
    @apply duration-250 opacity-0;
  }
}

@utility ak-popover {
  @apply ak-popover_idle;
  &:is(dialog, [popover]) {
    @apply open:ak-popover_open not-open:ak-popover_closed;
  }
}

@utility ak-popover-scroll {
  @apply ak-frame-cover overflow-auto overscroll-contain;
}

@utility ak-popover-position-* {
  --ak-popover-position-area-x: --value(
    "top",
    "right",
    "bottom",
    "left",
    "start",
    "center",
    "end",
    "block-start",
    "block-center",
    "block-end",
    "inline-start",
    "inline-center",
    "inline-end",
    "span-all",
    "span-start",
    "span-end",
    "span-block-start",
    "span-block-end",
    "span-inline-start",
    "span-inline-end"
  );
  --ak-popover-position-area-y: ;
  --ak-popover-position-area-y: --modifier(
    "top",
    "right",
    "bottom",
    "left",
    "start",
    "center",
    "end",
    "block-start",
    "block-center",
    "block-end",
    "inline-start",
    "inline-center",
    "inline-end",
    "span-all",
    "span-start",
    "span-end",
    "span-block-start",
    "span-block-end",
    "span-inline-start",
    "span-inline-end",
    "none"
  );
  position-area: var(--ak-popover-position-area-x)
    var(--ak-popover-position-area-y);
  position-try-fallbacks:
    flip-block,
    flip-inline,
    flip-block flip-inline;
}
