.p-image-mask {
  @apply flex items-center justify-center;
}

.p-image-preview {
  @apply relative inline-flex leading-none;
}

.p-image-preview-mask {
  @apply absolute start-0 top-0 flex h-full w-full cursor-pointer items-center justify-center border-none bg-transparent p-0 text-surface-200 opacity-0 transition-all duration-200;
}

.p-image-preview:hover > .p-image-preview-mask {
  @apply cursor-pointer bg-black/40 opacity-100 dark:bg-black/60;
}

.p-image-preview-icon {
  @apply h-6 w-6 text-2xl;
}

.p-image-toolbar {
  @apply absolute bottom-auto end-4 start-auto top-4 z-10 flex gap-2 rounded-3xl border border-white/20 bg-white/10 p-2;
}

.p-image-action {
  @apply m-0 inline-flex h-12 w-12 cursor-pointer select-none items-center justify-center rounded-full border-none bg-transparent p-0 text-surface-50 transition-colors duration-200 hover:bg-white/10 hover:text-surface-0 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary;
}

.p-image-action .p-icon {
  @apply h-6 w-6 text-2xl;
}

.p-image-action.p-disabled {
  @apply pointer-events-auto;
}

.p-image-original {
  @apply max-h-[100vh] max-w-[100vw] transition-transform duration-150;
}

.p-image-original-enter-active {
  @apply transition-all duration-150 ease-[cubic-bezier(0,0,0.2,1)];
}

.p-image-original-leave-active {
  @apply transition-all duration-150 ease-[cubic-bezier(0.4,0,0.2,1)];
}

.p-image-original-enter-from,
.p-image-original-leave-to {
  @apply scale-75 opacity-0;
}
