/**
 * 1. Make the dialog container, and its child overlay spread across
 *    the entire window.
 */
.sl-dialog,
.sl-dialog__overlay {
  position: fixed; /* 1 */
  inset: 0; /* 1 */
}

.sl-dialog {
  z-index: 2;
}

.sl-dialog[aria-hidden="true"] {
  display: none;
}

/**
 * 1. Make sure the dialog container and all its descendants sits on
 *    top of the rest of the page.
 * 2. Make the dialog container a flex container to easily center the
 *    dialog.
 */
.sl-dialog__container {
  display: flex; /* 2 */
  flex-direction: column;
  height: 100%;
}

/**
 * 1. Make sure the dialog container and all its descendants are not
 *    visible and not focusable when it is hidden.
 */
.sl-dialog__container[aria-hidden="true"] {
  display: none; /* 1 */
}

/**
 * 1. Make the overlay look like an overlay.
 */
.sl-dialog__overlay {
  background-color: rgb(43 46 56 / 0.9); /* 1 */
}

/**
 * 1. Vertically and horizontally center the dialog in the page.
 * 2. Make sure the dialog sits on top of the overlay.
 * 3. Make sure the dialog has an opaque background.
 */
.sl-dialog__content {
  position: relative; /* 2 */
  z-index: 2; /* 2 */
  margin: auto; /* 1 */
  background-color: #fff; /* 3 */
}