@use 'layout/layout.scss';

.hidden {
  display: none;
}

// =============================================================================
// Dialog Base Styles
// =============================================================================

.p-dialog {
  @media (max-width: 768px) {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 95dvh !important;
  }
}

// =============================================================================
// Dialog Size Classes
// Use these to control dialog dimensions. Sizes are designed for common use cases.
// =============================================================================

// Extra Small - confirmations, simple alerts (~400px)
.dialog-xs.p-dialog {
  width: 90vw;
  max-width: 400px;
}

// Small - simple forms, pickers (~550px)
.dialog-sm.p-dialog {
  width: 90vw;
  max-width: 550px;
}

// Medium - standard dialogs (~700px)
.dialog-md.p-dialog {
  width: 90vw;
  max-width: 700px;
}

// Large - complex forms, lists (~900px)
.dialog-lg.p-dialog {
  width: 90vw;
  max-width: 900px;
}

// Extra Large - data-heavy views (~1200px)
.dialog-xl.p-dialog {
  width: 95vw;
  max-width: 1200px;
}

// Full - viewport filling dialogs
.dialog-full.p-dialog {
  width: 95vw;
  max-width: 95vw;
  height: 95dvh;
  max-height: 95dvh;

  .p-dialog-content {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}

// =============================================================================
// Dialog Style Modifiers
// Composable with size classes (e.g., 'dialog-lg dialog-minimal')
// =============================================================================

// Minimal - removes padding for custom headers/content
.dialog-minimal.p-dialog {
  border: none;

  .p-dialog-content {
    padding: 0;
  }
}

// =============================================================================
// Legacy Aliases (for backward compatibility)
// =============================================================================

// @deprecated Use 'dialog-minimal' instead
.dynamic-dialog-minimal.p-dialog {
  border: none;

  .p-dialog-content {
    padding: 0;
  }
}

// @deprecated Use 'dialog-xl' or 'dialog-full' instead
.dialog-maximal.p-dialog {
  width: 95vw;
  max-width: 1200px;
  height: 95dvh;
  max-height: 95dvh;
}

// @deprecated Use 'dialog-lg' instead
.dialog-medium.p-dialog {
  width: 90vw;
  max-width: 900px;
  height: 90dvh;
  max-height: 90dvh;
}

.gradient-divider {
  min-height: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  margin: 0.25rem 0;
  flex-shrink: 0;
}

// =============================================================================
// Confirmation Dialog Styles
// =============================================================================

.p-confirmdialog {
  max-width: 500px;
  width: 90vw;

  .p-confirmdialog-message {
    white-space: pre-line;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }
}
