.x-popover-content {
  background-color: var(--x-popover-content-background-color);
  border-radius: var(--x-popover-content-border-radius);
  padding: var(--x-popover-content-padding-block) var(--x-popover-content-padding-inline);
  z-index: var(--x-popover-content-z-index, var(--z-index-10));
  transition-property: var(--default-transition-property);
  transition-timing-function: var(--ease-in-out);
  transition-duration: var(--default-transition-duration);
  transform:
    translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
    scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
  will-change: transform;
  inline-size: max-content;
  position: absolute;

  &:where(.bottom),
  & {
    transform-origin: top;
  }

  &:where(.bottom-start) {
    transform-origin: top left;
  }

  &:where(.bottom-end) {
    inset-inline-end: 0;
    transform-origin: top right;
  }

  &:where(.right) {
    inset-block-start: 0;
    inset-inline-start: 100%;
    transform-origin: left;
  }

  &:where(.right-start) {
    transform-origin: left top;
  }

  &:where(.right-end) {
    inset-block: auto 0;
    transform-origin: left bottom;
  }

  &:where(.left) {
    inset-block-start: 0;
    inset-inline-end: 100%;
    transform-origin: right;
  }

  &:where(.left-start) {
    transform-origin: right top;
  }

  &:where(.left-end) {
    inset-block: auto 0;
    transform-origin: right bottom;
  }

  &:where(.top) {
    inset-block-end: 100%;
    transform-origin: bottom;
  }

  &:where(.top-start) {
    transform-origin: bottom left;
  }

  &:where(.top-end) {
    inset-inline-end: 0;
    transform-origin: bottom right;
  }

  &:where(.inline-center) {
    --tw-translate-x: -50%;

    inset-inline-start: 50%;
  }

  &:where(.block-center) {
    --tw-translate-y: -50%;

    inset-block-start: 50%;
  }

  &[popover]:not([data-open]) {
    --tw-scale-x: var(--x-popover-content-scale-x);
    --tw-scale-y: var(--x-popover-content-scale-y);

    opacity: 0%;
    pointer-events: none;
  }

  &:not([popover]) {
    .trigger-focus:not(:focus, :focus-within) > &,
    .trigger-hover:not(:hover) > & {
      --tw-scale-x: var(--x-popover-content-scale-x);
      --tw-scale-y: var(--x-popover-content-scale-y);

      opacity: 0%;
      visibility: hidden;
    }
  }
}