.ui-modal {
  min-width: 300px;
  max-width: 440px;
  padding: 14px;
  color: var(--ui-text, #d6d6d6);
  background: var(--ui-panel, #262626);
  border: 1px solid var(--ui-line, #3a3a3a);
  box-shadow: 0 0 12px rgba(0, 0, 0, .4);
}

/* The page under the dialog goes into a gray haze: lighter and with less contrast, so the dialog stands out. */
.ui-modal::backdrop {
  background: var(--ui-modal-backdrop, rgba(63, 62, 62, .5));
}

.ui-modal__title {
  margin: 0 0 10px;
  font-size: 14px;
}

.ui-modal__buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.ui-modal__button {
  padding: 4px 12px;
  font: inherit;
  color: var(--ui-text, #d6d6d6);
  background: var(--ui-panel-2, #2e2e2e);
  border: 1px solid var(--ui-line, #3a3a3a);
  border-radius: 4px;
  cursor: pointer;
}

.ui-modal__button.is-primary {
  font-weight: 600;
  border-color: var(--ui-text-dim, #8a8a8a);
}

.ui-modal__button:hover:not(:disabled) {
  background: var(--ui-hover, #383838);
}

.ui-modal__button:active:not(:disabled) {
  background: var(--ui-pressed, #1a1a1a);
}

.ui-modal__button:disabled {
  opacity: .45;
  cursor: default;
}

.ui-modal__button:focus {
  outline: none;
}

.ui-modal__button:focus-visible {
  border-color: var(--ui-focus, #3d7fd9);
  box-shadow: 0 0 0 1px var(--ui-focus, #3d7fd9);
}