.app-dialog {
  width: min(90vw, 420px);
  max-height: min(90dvh, 600px);
  overflow-y: auto;
  padding: 24px;
  background-color: var(--panel-color);
  color: var(--color);
  border: var(--button-border) solid var(--color);
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px var(--color), 0 16px 50px rgb(0 0 0 / 35%);
  font-family: var(--font-family);
}

.app-dialog::backdrop {
  background: rgb(0 0 0 / 50%);
}

.app-dialog h2 {
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: var(--color);
}

.app-dialog p {
  margin: 0 0 20px;
  white-space: pre-wrap;
  color: var(--color);
}

.app-dialog__input {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
  font-family: var(--font-family);
  background-color: var(--bgcolor);
  color: var(--color);
  border: var(--button-border) solid var(--color);
  border-radius: var(--button-border-radius);
}

.app-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.app-dialog button {
  padding: 10px 18px;
  min-height: 44px;
  font-family: var(--font-family);
  cursor: pointer;
  background-color: var(--bgcolor);
  color: var(--color);
  border: var(--button-border) solid var(--color);
  border-radius: var(--button-border-radius);
}

.app-dialog button:hover {
  background-color: var(--hover-bg-color);
}

.app-dialog__primary {
  background: var(--emphasis-color);
  color: black;
  border: var(--button-border) solid var(--color);
  font-weight: bold;
}

.app-dialog__primary:hover {
  background-color: var(--hover-bg-color) !important;
  transform: scale(1.05);
}