/* Styles for download-dialog.hbs */

.download-dialog {
  /* The UA centres a modal dialog with `margin: auto`, and the global reset
     zeroes it — which pins the dialog to the inset-0 box's start edge instead.
     Restated here rather than exempted in the reset, so the reset stays one
     rule. */
  margin: auto;
  width: 600px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 0;
  border: none;
  border-radius: 16px;
  background-color: var(--gray-0);
  color: inherit;
}

/* The overlay the legacy hand-rolled as a sibling div. Same colour. */
.download-dialog::backdrop {
  background: rgba(0, 0, 0, 0.4);
}

.download-dialog-content {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 24px;
}

.download-dialog-qr {
  flex: none;
  width: 150px;
  height: 150px;
}

.download-dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: start;
}

.download-dialog-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-800);
}

.download-dialog-description {
  font-size: 18px;
  font-weight: 400;
  color: var(--gray-500);
}

/* The legacy's `secondary` button, which our `.btn` set has no variant for. */
.download-dialog-action {
  padding: 8px 12px;
  background-color: var(--gray-200);
  color: var(--gray-700);
}

.download-dialog-close {
  position: absolute;
  /* The far side from the QR, which leads the content: on this RTL page that
     is the left edge, which is where the legacy put it. Logical rather than
     `left` so it stays opposite the QR if the page is ever rendered LTR. */
  inset-inline-end: 16px;
  top: 16px;
  display: flex;
  padding: 0;
  border: none;
  background: none;
  color: var(--gray-500);
  cursor: pointer;
}