/**
 * Modal Variant Styles
 * @countermeasure/web-components
 *
 * Supplements the base cmm-modal styles in ui.css with variant-specific
 * styles for confirm dialogs, alerts, loading states, and transitions.
 */

/* ============================================================================
   MODAL TRANSITIONS
   ============================================================================ */
.cmm-modal__dialog--entering {
  animation: cmm-modal-enter var(--transition-normal, 200ms) ease-out;
}

.cmm-modal__dialog--exiting {
  animation: cmm-modal-exit var(--transition-normal, 200ms) ease-in forwards;
}

@keyframes cmm-modal-enter {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cmm-modal-exit {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Backdrop fade */
.cmm-modal--entering {
  animation: cmm-modal-backdrop-enter var(--transition-normal, 200ms) ease-out;
}

.cmm-modal--exiting {
  animation: cmm-modal-backdrop-exit var(--transition-normal, 200ms) ease-in forwards;
}

@keyframes cmm-modal-backdrop-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cmm-modal-backdrop-exit {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ============================================================================
   CONFIRM VARIANT
   ============================================================================ */
.cmm-modal--confirm .cmm-modal__body {
  font-size: 0.9375rem;
  line-height: 1.6;
}

.cmm-modal--confirm .cmm-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.cmm-modal--confirm .cmm-modal__cancel {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  background-color: hsl(var(--card));
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background-color var(--transition-fast, 150ms),
              border-color var(--transition-fast, 150ms);
}

.cmm-modal--confirm .cmm-modal__cancel:hover {
  background-color: hsl(var(--accent));
}

.cmm-modal--confirm .cmm-modal__confirm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  transition: opacity var(--transition-fast, 150ms);
}

.cmm-modal--confirm .cmm-modal__confirm:hover {
  opacity: 0.9;
}

/* Destructive confirm */
.cmm-modal--confirm-destructive .cmm-modal__confirm {
  background-color: hsl(var(--danger));
  color: hsl(var(--danger-foreground));
}

/* ============================================================================
   ALERT VARIANT
   ============================================================================ */
.cmm-modal--alert .cmm-modal__body {
  text-align: center;
  padding: 2rem 1.5rem;
}

.cmm-modal--alert .cmm-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  border-radius: 50%;
}

.cmm-modal--alert .cmm-modal__icon--success {
  background-color: hsl(var(--success) / 0.15);
  color: hsl(var(--success));
}

.cmm-modal--alert .cmm-modal__icon--error {
  background-color: hsl(var(--danger) / 0.15);
  color: hsl(var(--danger));
}

.cmm-modal--alert .cmm-modal__icon--warning {
  background-color: hsl(var(--warning) / 0.15);
  color: hsl(var(--warning));
}

.cmm-modal--alert .cmm-modal__icon--info {
  background-color: hsl(var(--info) / 0.15);
  color: hsl(var(--info));
}

.cmm-modal--alert .cmm-modal__footer {
  justify-content: center;
}

.cmm-modal--alert .cmm-modal__ok {
  padding: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--radius-md);
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  cursor: pointer;
  transition: opacity var(--transition-fast, 150ms);
}

.cmm-modal--alert .cmm-modal__ok:hover {
  opacity: 0.9;
}

/* ============================================================================
   LOADING OVERLAY
   ============================================================================ */
.cmm-modal__loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsl(var(--card) / 0.8);
  backdrop-filter: blur(2px);
  border-radius: 0.75rem;
}

.cmm-modal__loading-spinner {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--info));
  border-radius: 50%;
  animation: cmm-spin 0.75s linear infinite;
}

/* ============================================================================
   FOCUS TRAP HIGHLIGHT
   ============================================================================ */
.cmm-modal__dialog:focus-visible {
  outline: none;
}

.cmm-modal__dialog [data-focus-guard] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

/* Highlight first focusable element when modal opens */
.cmm-modal--focus-visible .cmm-modal__dialog :focus-visible {
  outline: 2px solid hsl(var(--focus-ring));
  outline-offset: 2px;
}

/* ============================================================================
   SIZE VARIANTS
   ============================================================================ */
.cmm-modal--sm .cmm-modal__dialog {
  max-width: 24rem;
}

.cmm-modal--lg .cmm-modal__dialog {
  max-width: 48rem;
}

.cmm-modal--xl .cmm-modal__dialog {
  max-width: 64rem;
}

.cmm-modal--full .cmm-modal__dialog {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  width: 100%;
  height: 100%;
}
