/**
 * Dialog
 */

@layer dx-components {
  .dx-dialog__overlay {
    @apply z-40 fixed grid inset-x-0 top-0 h-dvh py-[env(safe-area-inset-top)] place-items-center;
    @apply bg-scrim-surface backdrop-blur-xs;

    &[data-state='open'] {
      @apply animate-fade-in;
    }

    &[data-state='closed'] {
      @apply animate-fade-out;
    }

    &[data-block-align='start'] {
      align-items: start;
      justify-items: center;
    }

    &[data-block-align='center'] {
      place-items: center;
    }

    &[data-block-align='end'] {
      align-items: end;
      justify-items: center;
    }
  }

  @media (width >= theme(--breakpoint-sm)) {
    .dx-dialog__overlay {
      @apply p-[calc(env(safe-area-inset-top)+.6rem)];
    }
  }

  @media (width >= theme(--breakpoint-md)) {
    .dx-dialog__overlay {
      @apply p-[calc(env(safe-area-inset-top)+1.2rem)];
    }
  }

  @media (width >= theme(--breakpoint-lg)) {
    .dx-dialog__overlay {
      @apply p-[calc(env(safe-area-inset-top)+2.4rem)];
    }
  }

  .dx-dialog__content {
    @apply flex flex-col w-dvw max-w-full max-h-full overflow-hidden shadow-md;

    &[data-state='open'] {
      @apply animate-slide-up-and-fade;
    }

    &[data-state='closed'] {
      @apply animate-slide-down-and-fade;
    }
  }

  @media (width >= theme(--breakpoint-sm)) {
    .dx-dialog__content {
      @apply w-[95vw] border rounded-md border-separator;
    }
  }

  @media (width >= theme(--breakpoint-md)) {
    .dx-dialog__content {
      @apply max-w-[24rem];
    }
  }

  .dx-dialog__title {
    @apply shrink-0 text-xl font-medium;
  }
}