/*
 * App-styled confirmation dialog (common/ConfirmDialog.js) — the shared, translatable replacement for
 * window.confirm(). Loaded globally from common/main so any page can call ConfirmDialog.confirm().
 */
dialog.ps-confirm {
  box-sizing: border-box;
  width: 380px;
  max-width: calc(100vw - 32px);
  border: none;
  border-radius: 12px;
  padding: 20px;
  background: var(--color-neutral-white);
  color: var(--color-neutral-black);
  box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
  font-family: var(--font-primary);
  font-size: 14px;
}

dialog.ps-confirm::backdrop { background: rgb(0 0 0 / 45%); }

.ps-confirm__message {
  margin: 0;
  line-height: 1.45;
}

.ps-confirm__btn {
  gap: 6px;
}

.ps-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

/* There's no destructive variant in the design system, so a delete's confirm button is a primary one re-tinted with
   the error token — same workaround as .partners-row-btn--danger, and like it these re-assert over the variant's own
   :hover and :focus, which would otherwise put the primary's colors back — the focus ring included, so it's this
   button's red rather than the system's banana. error-300 rather than -200: white on -200 is 4.38:1, under the
   4.5:1 AA floor, and the ring needs 3:1 of its own. Hover darkens instead of lightening for the same reason. */
.ps-confirm__btn--danger,
.ps-confirm__btn--danger:focus {
  background-color: var(--color-error-300);
  color: var(--color-neutral-white);
  outline-color: var(--color-error-300);
}

.ps-confirm__btn--danger:hover {
  background-color: color-mix(in srgb, var(--color-error-200) 60%, black);
  color: var(--color-neutral-white);
}

.ps-confirm__btn-icon {
  width: 16px;
  height: 16px;
}