.p-connected-overlay-enter-from {
  @apply scale-y-75 opacity-0;
}

.p-connected-overlay-leave-to {
  @apply opacity-0;
}

.p-connected-overlay-enter-active {
  @apply transition-[opacity,transform] duration-150 ease-[cubic-bezier(0,0,0.2,1)];
}

.p-connected-overlay-leave-active {
  @apply transition-opacity duration-100 ease-linear;
}

.p-toggleable-content-enter-from,
.p-toggleable-content-leave-to {
  @apply max-h-0;
}

.p-toggleable-content-enter-to,
.p-toggleable-content-leave-from {
  @apply max-h-[1000px];
}

.p-toggleable-content-leave-active {
  @apply overflow-hidden transition-[max-height] ease-[cubic-bezier(0,1,0,1)] animate-duration-[450ms];
}

.p-toggleable-content-enter-active {
  @apply overflow-hidden transition-[max-height] duration-1000 ease-in-out;
}

.p-disabled,
.p-disabled * {
  @apply pointer-events-none cursor-default select-none;
}

.p-disabled,
.p-component:disabled {
  @apply opacity-60;
}

.pi {
  @apply text-base;
}

.p-icon {
  @apply h-4 w-4;
}

.p-overlay-mask {
  @apply fixed start-0 top-0 h-full w-full bg-black/50 text-surface-200 transition-colors duration-150;
}

.p-overlay-mask-enter {
  animation: p-overlay-mask-enter-animation 150ms forwards;
}

.p-overlay-mask-leave {
  animation: p-overlay-mask-leave-animation 150ms forwards;
}

@keyframes p-overlay-mask-enter-animation {
  from {
    background: transparent;
  }
  to {
    background: rgba(0, 0, 0, 0.5);
  }
}

@keyframes p-overlay-mask-leave-animation {
  from {
    background: rgba(0, 0, 0, 0.5);
  }
  to {
    background: transparent;
  }
}
