@layer components {
  [data-name="dialog-container"] {
    @apply fixed inset-0 h-screen w-screen;
    &:not([data-open]) {
      @apply touch-none pointer-events-none;
    }
  }

  [data-name="dialog-background"] {
    @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
    animation-fill-mode: forwards;

    &[data-state="opening"] {
      animation-duration: var(--animation-duration-in);
    }

    &[data-state="closing"] {
      animation-duration: var(--animation-duration-out);
      animation-direction: reverse;
    }

    &[data-state="opening"],
    &[data-state="closing"] {
      animation-name: fade-in;
    }
  }

  [data-name="dialog-content"] {
    @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)];
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;

    &[data-state="opening"],
    &[data-state="opened"] {
      animation-duration: var(--animation-duration-in);
    }
    &[data-state="closing"] {
      animation-duration: var(--animation-duration-out);
      animation-direction: reverse;
    }
    &[data-state="opening"],
    &[data-state="closing"] {
      animation-name: pop-in;
    }

    &[data-position="top"] {
      @apply fixed top-8 left-1/2 -translate-x-1/2;
    }
    &[data-position="center"] {
      @apply fixed left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2;
    }
  }
}