/**
 * Compact Variants
 * Compact spacing, text sizes, and component variants
 * BEM naming convention
 */

/* ==========================================================================
   Compact Message
   ========================================================================== */

.compact-message {
  padding: 0.5rem 0.625rem !important;
}

@media (min-width: 640px) {
  .compact-message {
    padding: 0.625rem 0.75rem !important;
  }
}

/* ==========================================================================
   Compact Spacing
   ========================================================================== */

.compact-spacing {
  gap: 0.375rem !important;
}

.compact-spacing--xs {
  gap: 0.25rem !important;
}

.compact-spacing--sm {
  gap: 0.375rem !important;
}

.compact-spacing--md {
  gap: 0.5rem !important;
}

/* ==========================================================================
   Compact Text Sizes
   ========================================================================== */

.compact-text-xs {
  font-size: 0.65rem !important;
  line-height: 1rem !important;
}

.compact-text-sm {
  font-size: 0.75rem !important;
  line-height: 1.25rem !important;
}

.compact-text-base {
  font-size: 0.8125rem !important;
  line-height: 1.375rem !important;
}

/* ==========================================================================
   Compact Padding
   ========================================================================== */

.compact-p-xs {
  padding: 0.25rem !important;
}

.compact-p-sm {
  padding: 0.375rem !important;
}

.compact-p-md {
  padding: 0.5rem !important;
}

.compact-px-xs {
  padding-left: 0.25rem !important;
  padding-right: 0.25rem !important;
}

.compact-px-sm {
  padding-left: 0.375rem !important;
  padding-right: 0.375rem !important;
}

.compact-px-md {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

.compact-py-xs {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

.compact-py-sm {
  padding-top: 0.375rem !important;
  padding-bottom: 0.375rem !important;
}

.compact-py-md {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ==========================================================================
   Compact Margins
   ========================================================================== */

.compact-m-xs {
  margin: 0.25rem !important;
}

.compact-m-sm {
  margin: 0.375rem !important;
}

.compact-mt-xs {
  margin-top: 0.25rem !important;
}

.compact-mt-sm {
  margin-top: 0.375rem !important;
}

.compact-mb-xs {
  margin-bottom: 0.25rem !important;
}

.compact-mb-sm {
  margin-bottom: 0.375rem !important;
}

/* ==========================================================================
   Editor Compact Mode
   ========================================================================== */

.editor-compact {
  transform: translateY(0);
  transition: all 0.3s ease-in-out;
}

.editor-compact .editor-form-wrapper {
  max-height: 60px;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}

.editor-compact lexxy-toolbar {
  display: none;
}

.editor-compact .lexxy-editor__content {
  min-block-size: 2lh !important;
  max-block-size: 2lh !important;
}

.editor-compact .editor-controls {
  opacity: 0.7;
  transform: scale(0.95);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Editor Form Wrapper Normal State */
.editor-form-wrapper {
  transition: max-height 0.3s ease-in-out;
}

lexxy-toolbar {
  transition: display 0.3s ease-in-out;
}

.lexxy-editor__content {
  transition: min-block-size 0.3s ease-in-out, max-block-size 0.3s ease-in-out;
}

.editor-controls {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Lexxy Editor Container */
lexxy-editor {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Compact Component Modifiers
   ========================================================================== */

/* Compact Button */
.btn--compact {
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
}

/* Compact Card */
.card--compact {
  padding: 0.75rem;
  border-radius: var(--radius-lg, 0.75rem);
}

/* Compact Badge */
.badge--compact {
  padding: 0.125rem 0.375rem;
  font-size: 0.625rem;
}

/* Compact Avatar */
.avatar--compact {
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
}

/* Compact Input */
.input--compact {
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-md, 0.5rem);
}

/* Compact Message */
.message--compact {
  padding: 0.5rem 0.625rem;
}

@media (min-width: 640px) {
  .message--compact {
    padding: 0.625rem 0.75rem;
  }
}

/* ==========================================================================
   Responsive Compact
   ========================================================================== */

/* Only compact on mobile */
@media (max-width: 639px) {
  .sm\:compact-message {
    padding: 0.5rem 0.625rem !important;
  }
  
  .sm\:compact-spacing {
    gap: 0.375rem !important;
  }
  
  .sm\:compact-text-sm {
    font-size: 0.75rem !important;
    line-height: 1.25rem !important;
  }
}