// ============================================================
// Sizing Utilities
// Width, height, min/max dimensions
// ============================================================

@layer utilities {
  // --------------------------------------------------------
  // Width
  // --------------------------------------------------------

  .cyber-w-auto {
    width: auto;
  }

  .cyber-w-full {
    width: 100%;
  }

  .cyber-w-screen {
    width: 100vw;
  }

  .cyber-w-min {
    width: min-content;
  }

  .cyber-w-max {
    width: max-content;
  }

  .cyber-w-fit {
    width: fit-content;
  }

  // Fractional widths
  .cyber-w-half {
    width: 50%;
  }

  .cyber-w-third {
    width: 33.3333%;
  }

  .cyber-w-two-thirds {
    width: 66.6667%;
  }

  .cyber-w-quarter {
    width: 25%;
  }

  .cyber-w-three-quarters {
    width: 75%;
  }

  // Fixed widths
  .cyber-w-xs {
    width: 20rem;
  }

  .cyber-w-sm {
    width: 24rem;
  }

  .cyber-w-md {
    width: 28rem;
  }

  .cyber-w-lg {
    width: 32rem;
  }

  .cyber-w-xl {
    width: 36rem;
  }

  // --------------------------------------------------------
  // Max Width
  // --------------------------------------------------------

  .cyber-max-w-none {
    max-width: none;
  }

  .cyber-max-w-full {
    max-width: 100%;
  }

  .cyber-max-w-screen {
    max-width: 100vw;
  }

  .cyber-max-w-xs {
    max-width: 20rem;
  }

  .cyber-max-w-sm {
    max-width: 24rem;
  }

  .cyber-max-w-md {
    max-width: 28rem;
  }

  .cyber-max-w-lg {
    max-width: 32rem;
  }

  .cyber-max-w-xl {
    max-width: 36rem;
  }

  .cyber-max-w-2xl {
    max-width: 42rem;
  }

  .cyber-max-w-3xl {
    max-width: 48rem;
  }

  .cyber-max-w-4xl {
    max-width: 56rem;
  }

  .cyber-max-w-5xl {
    max-width: 64rem;
  }

  .cyber-max-w-6xl {
    max-width: 72rem;
  }

  .cyber-max-w-7xl {
    max-width: 80rem;
  }

  // --------------------------------------------------------
  // Min Width
  // --------------------------------------------------------

  .cyber-min-w-0 {
    min-width: 0;
  }

  .cyber-min-w-full {
    min-width: 100%;
  }

  .cyber-min-w-min {
    min-width: min-content;
  }

  .cyber-min-w-max {
    min-width: max-content;
  }

  // --------------------------------------------------------
  // Height
  // --------------------------------------------------------

  .cyber-h-auto {
    height: auto;
  }

  .cyber-h-full {
    height: 100%;
  }

  .cyber-h-screen {
    height: 100vh;
  }

  .cyber-h-min {
    height: min-content;
  }

  .cyber-h-max {
    height: max-content;
  }

  .cyber-h-fit {
    height: fit-content;
  }

  // Fractional heights
  .cyber-h-half {
    height: 50%;
  }

  .cyber-h-third {
    height: 33.3333%;
  }

  .cyber-h-two-thirds {
    height: 66.6667%;
  }

  // --------------------------------------------------------
  // Min Height
  // --------------------------------------------------------

  .cyber-min-h-0 {
    min-height: 0;
  }

  .cyber-min-h-full {
    min-height: 100%;
  }

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

  // --------------------------------------------------------
  // Max Height
  // --------------------------------------------------------

  .cyber-max-h-full {
    max-height: 100%;
  }

  .cyber-max-h-screen {
    max-height: 100vh;
  }

  .cyber-max-h-none {
    max-height: none;
  }
}