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

/**
 * 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.
 */
.dialog-container {
  z-index: 2;
  /* 1 */
  display: flex;
  /* 2 */
}

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

/**
 * 1. Make the overlay look like an overlay.
 */
.dialog-overlay {
  background-color: var(--anrt-color-primary-b);
  opacity: .9;
  z-index: 19;
}

/**
 * 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.
 */
.dialog-content {
  margin: auto;
  /* 1 */
  z-index: 20;
  /* 2 */
  position: relative;
  /* 2 */
  background-color: var(--anrt-color-white);
  border-radius: .5rem;
  padding: var(--anrt-spacing-200);
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

@media (min-width: 48rem) {
  .dialog-content {
    /* padding: var(--anrt-spacing-100); */
  }
}

.dialog-title {
  font-weight: 900;
  font-size: var(--anrt-font-size-h2);
  text-align: center;
  margin-bottom: var(--anrt-spacing-200);
}

.dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  /* padding: 0; */
  background: none;
  border: 0;
  border-radius: 0 !important;
  box-shadow: none !important;
  --anrt-button-color: var(--anrt-color-primary);
  --anrt-button-focus-color: var(--anrt-color-primary-a);
  --anrt-button-focus-bg: transparent !important;
  --anrt-button-focus-border: transparent !important;
}