@layer components {
  :root {
    --dialog-content__bg-color: var(--color-surface-primary);

    /* if you change these, change `dialog.ts` too */
    --dialog-fade-animation-duration: 0.3s;
    --dialog-slide-animation-duration: 0.3s;

    --dialog-title__font-family: var(--typography-headline-small__font-family);
    --dialog-title__font-size: var(--typography-headline-small__font-size);
    --dialog-title__line-height: var(--typography-headline-small__line-height);
    --dialog-title__letter-spacing: var(
      --typography-headline-small__letter-spacing
    );
    --dialog-title__font-weight: var(--typography-headline-small__font-weight);
    --dialog-title__text-color: var(--color-neutral-700);

    --dialog-description__font-family: var(
      --typography-body-large__font-family
    );
    --dialog-description__font-size: var(--typography-body-large__font-size);
    --dialog-description__line-height: var(
      --typography-body-large__line-height
    );
    --dialog-description__letter-spacing: var(
      --typography-body-large__letter-spacing
    );
    --dialog-description__font-weight: var(
      --typography-body-large__font-weight
    );
    --dialog-description__text-color: var(--color-neutral-400);
  }
  :root.dark {
    --dialog-title__text-color: var(--color-neutral-100);
    --dialog-description__text-color: var(--color-neutral-200);
  }

  .dialog-backdrop {
    /* common styles */

    /* In DEV-3003, we realized that using fixed will cause the element to span full height in ASWebAuthenticationSession. */
    /* On iOS 26, it is troublesome because the fixed element will overlap with the browser bottom bar. */
    /* Therefore, we changed our approach and use absolute instead */
    /* The caveat of using absolute is that we have to make sure we have no unintended positioned parent. */
    @apply absolute;
    @apply inset-0;
    @apply flex;

    /* It is important to have overflow: hidden because */
    /* In mobile layout, dialog has transform: translateY(100%) */
    /* That transform will cause scroll bar to appear, making the page longer than expected */
    @apply overflow-hidden;

    background-color: rgb(0 0 0 / 0.5);

    /* if you change these, change `dialog.ts` too */
    visibility: hidden;
    opacity: 0;
    &.open {
      visibility: visible;
      opacity: 1;
    }
    transition: visibility var(--dialog-fade-animation-duration) ease-in-out,
      opacity var(--dialog-fade-animation-duration) ease-in-out;

    /* mobile-specific styles */
    @apply flex-col;
    @apply justify-end;
  }

  .dialog {
    /* common styles */
    background-color: var(--dialog-content__bg-color);
    @apply relative;
    @apply pt-8;
    @apply pr-[max(var(--safe-area-inset-right),2rem)];
    @apply pb-[max(var(--safe-area-inset-bottom),2rem)];
    @apply pl-[max(var(--safe-area-inset-left),2rem)];

    /* mobile-specific styles */
    @apply w-screen;
    @apply rounded-t-2xl;
    @apply h-min;
    transform: translateY(100%);
    /* if you change these, change `dialog.ts` too */
    transition: transform var(--dialog-slide-animation-duration) ease-in-out;
  }

  .dialog-backdrop.open > .dialog {
    transform: translateY(0%);
  }

  .dialog-title-description {
    @apply flex flex-col gap-2;
  }

  .dialog-title {
    font-family: var(--dialog-title__font-family);
    font-size: var(--dialog-title__font-size);
    line-height: var(--dialog-title__line-height);
    letter-spacing: var(--dialog-title__letter-spacing);
    font-weight: var(--dialog-title__font-weight);
    color: var(--dialog-title__text-color);

    :root[alignment-content="start"] & {
      @apply text-start;
    }

    :root[alignment-content="center"] & {
      @apply text-center;
    }

    :root[alignment-content="end"] & {
      @apply text-end;
    }
  }

  .dialog-description {
    font-family: var(--dialog-description__font-family);
    font-size: var(--dialog-description__font-size);
    line-height: var(--dialog-description__line-height);
    letter-spacing: var(--dialog-description__letter-spacing);
    font-weight: var(--dialog-description__font-weight);
    color: var(--dialog-description__text-color);

    :root[alignment-content="start"] & {
      @apply text-start;
    }

    :root[alignment-content="center"] & {
      @apply text-center;
    }

    :root[alignment-content="end"] & {
      @apply text-end;
    }
  }

  .dialog-close-btn--bot-protection {
    /* close button icon distance to top/right edge = 21px
     * close button icon size = 14px
     * close button button size = 44px
     * Actual distance = [(14 / 2) + 21] - (44 / 2) = 6px
     */
    @apply absolute top-1.5 ltr:right-1.5 rtl:left-1.5;
  }

  @media (min-width: theme("screens.tablet")) {
    .dialog-backdrop {
      @apply flex-col;
      @apply items-center;
      @apply justify-center;
    }

    .dialog {
      @apply rounded-2xl;
      @apply w-98;
      @apply pt-8;
      @apply pr-8;
      @apply pb-8;
      @apply pl-8;

      transform: none; /* slide animation only wanted on mobile */
    }

    .dialog-backdrop.open > .dialog {
      transform: none; /* slide animation only wanted on mobile */
    }

    .dialog-close-btn--bot-protection {
      /* close button icon distance to top/right edge = 25px
       * close button icon size = 14px
       * close button button size = 44px
       * Actual distance = [(14 / 2) + 25] - (44 / 2) = 10px
       */
      @apply absolute top-2.5 ltr:right-2.5 rtl:left-2.5;
    }
  }
}
