@radix-ui/themes/src/components/base-dialog.css

[](https://radix-ui.com/themes)

.rt-BaseDialogOverlay {
  position: fixed;
  inset: 0;

  &::before {
    position: fixed;
    content: '';
    inset: 0;
    background-color: var(--color-overlay);
  }
}

.rt-BaseDialogScroll {
  display: flex;
  overflow: auto;
  position: absolute;
  inset: 0;
}

.rt-BaseDialogScrollPadding {
  flex-grow: 1;
  margin: auto;
  padding-top: var(--space-6);
  padding-bottom: max(var(--space-6), 6vh);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.rt-BaseDialogContent {
  margin: auto;
  width: 100%;
  z-index: 1;
  position: relative;
  box-sizing: border-box;
  overflow: auto;

  --inset-padding-top: var(--dialog-content-padding);
  --inset-padding-right: var(--dialog-content-padding);
  --inset-padding-bottom: var(--dialog-content-padding);
  --inset-padding-left: var(--dialog-content-padding);
  padding: var(--dialog-content-padding);
  box-sizing: border-box;

  background-color: var(--color-panel-solid);
  box-shadow: var(--shadow-6);
  outline: none;
}

/***************************************************************************************************
 *                                                                                                 *
 * SIZES                                                                                           *
 *                                                                                                 *
 ***************************************************************************************************/

@breakpoints {
  .rt-BaseDialogContent {
    &:where(.rt-r-size-1) {
      --dialog-content-padding: var(--space-3);
      border-radius: var(--radius-4);
    }
    &:where(.rt-r-size-2) {
      --dialog-content-padding: var(--space-4);
      border-radius: var(--radius-4);
    }
    &:where(.rt-r-size-3) {
      --dialog-content-padding: var(--space-5);
      border-radius: var(--radius-5);
    }
    &:where(.rt-r-size-4) {
      --dialog-content-padding: var(--space-6);
      border-radius: var(--radius-5);
    }
  }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rt-dialog-overlay-no-op {
    from {
      opacity: 1;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes rt-dialog-content-show {
    from {
      opacity: 0;
      transform: translateY(5px) scale(0.97);
    }
    to {
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
  }

  @keyframes rt-dialog-content-hide {
    from {
      opacity: 1;
      transform: translateY(0px) scale(1);
    }
    to {
      opacity: 0;
      transform: translateY(5px) scale(0.99);
    }
  }

  .rt-BaseDialogOverlay {
    /* Keep the overlay mounted until the children have animated */
    &:where([data-state='closed']) {
      animation: rt-dialog-overlay-no-op 160ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    &:where([data-state='open'])::before {
      animation: rt-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    &:where([data-state='closed'])::before {
      animation: rt-fade-out 160ms cubic-bezier(0.16, 1, 0.3, 1);
    }
  }

  .rt-BaseDialogContent {
    &:where([data-state='open']) {
      animation: rt-dialog-content-show 200ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    &:where([data-state='closed']) {
      animation: rt-dialog-content-hide 100ms cubic-bezier(0.16, 1, 0.3, 1);
    }
  }
}