// Rôle : stylise les modales de confirmation génériques.
.confirm-modal-root {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  overscroll-behavior: contain;
}

.tool-add-modal-root {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  overscroll-behavior: contain;
}

.confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 3, 9, 0.62);
  backdrop-filter: blur(6px);
}

.confirm-modal {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: rgba(16, 20, 38, 0.96);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
}

.confirm-modal h2 {
  margin-bottom: var(--space-3);
}

.confirm-modal p {
  margin-bottom: var(--space-6);
}

.confirm-modal footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@property --notification-toast-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}