/*********************
 * Fade *
 *********************/
@utility fade {
  & {
    --opacity: var(--closed-opacity, 0);
    opacity: var(--opacity, 0);
  }

  &:where([open], :popover-open, .open, .show) {
    --opacity: var(--opened-opacity, 1);

    @starting-style {
      --opacity: var(--opening-opacity, 0);
    }
  }
}

/*********************
 * Fly *
 *********************/
@utility fly {
  & {
    --tx: var(--closed-tx, 0);
    --ty: var(--closed-ty, 0);
    transform: translateX(var(--tx)) translateY(var(--ty));
  }

  &:where([open], :popover-open, .open, .show) {
    --tx: var(--opened-tx, 0);
    --ty: var(--opened-ty, 0);

    @starting-style {
      --tx: var(--opening-tx, 0);
      --ty: var(--opening-ty, 0);
    }
  }
}

@utility fly-from-top {
  & {
    @apply fly;
    --closed-ty: -100%;
    --opened-ty: 0;
    --opening-ty: -100%;
  }
}

@utility fly-from-bottom {
  & {
    @apply fly;
    --closed-ty: 100%;
    --opened-ty: 0;
    --opening-ty: 100%;
  }
}

@utility fly-from-left {
  & {
    @apply fly;
    --closed-tx: -100%;
    --opened-tx: 0;
    --opening-tx: -100%;
  }
}

@utility fly-from-right {
  & {
    @apply fly;
    --closed-tx: 100%;
    --opened-tx: 0;
    --opening-tx: 100%;
  }
}