/* ========================================
   Modals
   ======================================== */

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

 .modal-overlay {
  @apply fixed inset-0 bg-black/50 z-[--z-modal];
  animation: modalFadeIn 150ms ease-out;
}

 .modal-content {
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
  @apply w-[90vw] max-w-md max-h-[85vh];
  @apply bg-surface rounded-xl shadow-lg z-[--z-modal];
  @apply flex flex-col;
  animation: modalContentIn 200ms ease-out;
}

 .modal-content--lg {
  @apply max-w-lg;
}

 .modal-header {
  @apply flex items-center justify-between px-6 py-4 border-b border-border;
}

 .modal-title {
  @apply text-lg font-semibold text-text;
}

 .modal-close {
  @apply p-1 rounded hover:bg-surface-secondary transition-colors;
}

 .modal-body {
  @apply flex-1 overflow-auto px-6 py-4 space-y-4;
}

 .modal-footer {
  @apply flex justify-end gap-2 px-6 py-4 border-t border-border;
}

 .modal-field {
  @apply flex flex-col gap-2;
}

 .modal-label {
  @apply text-sm font-medium text-text;
}

 .modal-grid-2 {
  @apply grid grid-cols-2 gap-4;
}

 .modal-button-group {
  @apply flex flex-wrap gap-2;
}

 .modal-toggle-btn {
  @apply px-3 py-1.5 text-sm rounded-md border border-border;
  @apply bg-surface text-text;
  @apply hover:bg-surface-secondary transition-colors;

  &.active {
    @apply bg-primary text-white border-primary;
  }

  &--icon {
    @apply px-2.5 py-2;
  }
}

.modal-label__breakpoint {
  @apply ml-1 text-xs text-text-muted font-normal;
}