.x-dialog {
  z-index: var(--x-dialog-z-index, var(--z-index-30));
  padding: var(--x-dialog-padding-block) var(--x-dialog-padding-inline);
  background-color:
    color-mix(
      in var(--x-dialog-background-color-space, srgb),
      var(--x-dialog-background-color) var(--x-dialog-background-color-opacity),
      var(--x-dialog-background-color-mix, transparent)
    );
  transition: var(--transition-background);
  display: flex;
  position: fixed;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  &::backdrop,
  &:not([open]) {
    display: none;
  }

  &[data-closed] {
    background-color: transparent;
  }
}

html:has(.x-dialog[open]) {
  padding-inline-end: var(--default-scrollbar-width);
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}