/* components/dialog/dialog.css */
/* Dialog Component - Specialized modal for alerts, confirms, and prompts */
/* Built on top of Modal component */
/* WCAG 2.2 AAA compliant */

/* Dialog-specific custom properties */
.c-dialog {
  /* Icon */
  --c-dialog-icon-size: 4rem;
  --c-dialog-icon-inner-size: 2rem;
}

/* Dialog base - extends modal */
.c-dialog {
  /* Inherits all modal styles */
}

/* Dialog content centered */
.c-dialog .c-modal__body {
  text-align: center;
  padding: var(--ds-space-xl);
}

.c-dialog .c-modal__footer {
  justify-content: center;
}

/* Dialog icon container */
.c-dialog__icon {
  width: var(--c-dialog-icon-size);
  height: var(--c-dialog-icon-size);
  margin: 0 auto var(--ds-space-l);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-circle);
  flex-shrink: 0;
}

.c-dialog__icon svg {
  width: var(--c-dialog-icon-inner-size);
  height: var(--c-dialog-icon-inner-size);
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Dialog message */
.c-dialog__message {
  margin: 0 0 var(--ds-space-m) 0;
  font-size: var(--ds-font-size-m);
  line-height: var(--ds-line-height-l);
  color: var(--ds-color-text);
}

/* Dialog input (for prompt) */
.c-dialog__input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: var(--ds-space-m);
  padding: var(--ds-space-s) var(--ds-space-m);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
  font-size: var(--ds-font-size-m);
  font-family: var(--ds-font-family-sans);
  color: var(--ds-color-text);
  background: var(--ds-color-surface);
  transition: border-color var(--ds-transition-fast);
}

.c-dialog__input:focus {
  outline: none;
  border-color: var(--ds-color-primary);
  box-shadow: 0 0 0 3px var(--ds-color-primary-weak);
}

.c-dialog__input::placeholder {
  color: var(--ds-color-text-weak);
}

/* ========================================
   Dialog Type Variants
   ======================================== */

/* Info dialog */
.c-dialog--info .c-dialog__icon {
  background: var(--ds-color-status-info-weak);
  color: var(--ds-color-text-info);
}

/* Success dialog */
.c-dialog--success .c-dialog__icon {
  background: var(--ds-color-status-success-weak);
  color: var(--ds-color-text-success);
}

/* Warning dialog */
.c-dialog--warning .c-dialog__icon {
  background: var(--ds-color-status-warning-weak);
  color: var(--ds-color-text-warning);
}

/* Danger dialog */
.c-dialog--danger .c-dialog__icon {
  background: var(--ds-color-status-danger-weak);
  color: var(--ds-color-text-danger);
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
  .c-dialog .c-modal__body {
    padding: var(--ds-space-l);
  }
  
  .c-dialog__icon {
    width: 3rem;
    height: 3rem;
  }
  
  .c-dialog__icon svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ========================================
   Accessibility
   ======================================== */

@media (prefers-contrast: high) {
  .c-dialog__icon {
    border: 2px solid currentColor;
  }
  
  .c-dialog__input {
    border-width: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-dialog__input {
    transition: none;
  }
}