/**
 * Layout Utilities
 * ================
 * Flexbox and Grid utility styles for common layout patterns
 */

@use './variables' as *;

@layer utilities {
  // ============================================================================
  // FLEXBOX
  // ============================================================================

  .flex {
    display: flex;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-stretch {
    align-items: stretch;
  }

  .gap-xs {
    gap: $spacing-xs;
  }

  .gap-sm {
    gap: $spacing-sm;
  }

  .gap-md {
    gap: $spacing-md;
  }

  .gap-lg {
    gap: $spacing-lg;
  }

  .gap-xl {
    gap: $spacing-xl;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  // ============================================================================
  // GRID
  // ============================================================================

  .grid {
    display: grid;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  // ============================================================================
  // DISPLAY
  // ============================================================================

  .hidden {
    display: none;
  }

  .block {
    display: block;
  }

  .inline-block {
    display: inline-block;
  }

  .inline {
    display: inline;
  }

  // ============================================================================
  // POSITIONING
  // ============================================================================

  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  // ============================================================================
  // SIZING
  // ============================================================================

  .w-full {
    width: 100%;
  }

  .w-auto {
    width: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-auto {
    height: auto;
  }

  .min-h-screen {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .max-w-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  // ============================================================================
  // OVERFLOW
  // ============================================================================

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }
}