/*
 * @mikestools/confirm - dialog content styles. Panel chrome (surface, border,
 * shadow, backdrop) comes from @mikestools/panel - import panel.css too.
 * Theme via --mt-confirm-* custom properties; values below are var()
 * FALLBACKS with light-dark() pairs, so consumer overrides win and unthemed
 * dialogs follow the page color-scheme.
 */

.mt-confirm {
  width: min(var(--mt-confirm-width, 420px), calc(100vw - 32px));
  display: flex;
  flex-direction: column;
}

.mt-confirm-title {
  padding: 10px 14px;
  font-weight: 600;
}

.mt-confirm-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mt-confirm-message {
  margin: 0;
  overflow-wrap: break-word;
}

.mt-confirm-input {
  font: inherit;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid var(--mt-confirm-input-border, light-dark(#c4c9d4, #3a4356));
  background: var(--mt-confirm-input-bg, light-dark(#ffffff, #141926));
  color: inherit;
}

.mt-confirm-input:focus-visible {
  outline: 2px solid var(--mt-confirm-accent, light-dark(#4468c4, #4c7dff));
  outline-offset: -1px;
}

.mt-confirm-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 14px 14px;
}

.mt-confirm-buttons button {
  font: inherit;
  font-weight: 600;
  border: 0;
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  color: #ffffff;
}

.mt-confirm-ok {
  background: var(--mt-confirm-accent, light-dark(#4468c4, #4c7dff));
}

.mt-confirm-ok.mt-confirm-danger {
  background: var(--mt-confirm-danger, light-dark(#c43333, #d64545));
}

/* Gray is reserved for cancel/disabled - this is the one. */
.mt-confirm-cancel {
  background: var(--mt-confirm-cancel-bg, light-dark(#6b7280, #4a5264));
}

.mt-confirm-buttons button:focus-visible {
  outline: 2px solid var(--mt-confirm-accent, light-dark(#4468c4, #4c7dff));
  outline-offset: 2px;
}