/*
 * Sizing utilities (width / height) - inspired by Tailwind CSS
 * https://tailwindcss.com/docs/width
 */

:root {
  --width-3xs: 16rem;   /* 256px */
  --width-2xs: 18rem;   /* 288px */
  --width-xs: 20rem;    /* 320px */
  --width-sm: 24rem;    /* 384px */
  --width-md: 28rem;    /* 448px */
  --width-lg: 32rem;    /* 512px */
  --width-xl: 36rem;    /* 576px */
  --width-2xl: 42rem;   /* 672px */
  --width-3xl: 48rem;   /* 768px */
  --width-4xl: 56rem;   /* 896px */
  --width-5xl: 64rem;   /* 1024px */
  --width-6xl: 72rem;   /* 1152px */
  --width-7xl: 80rem;   /* 1280px */
}

/* ========== WIDTH ========== */

/* Width by spacing scale */
.w-0 { width: var(--spacing-0); }  /* 0px */
.w-1 { width: var(--spacing-1); }  /* 2px */
.w-2 { width: var(--spacing-2); }  /* 4px */
.w-3 { width: var(--spacing-3); }  /* 6px */
.w-4 { width: var(--spacing-4); }  /* 8px */
.w-5 { width: var(--spacing-5); }  /* 12px */
.w-6 { width: var(--spacing-6); }  /* 16px */
.w-8 { width: var(--spacing-8); }  /* 24px */
.w-10 { width: var(--spacing-10); }  /* 32px */
.w-12 { width: var(--spacing-12); }  /* 40px */
.w-16 { width: var(--spacing-16); }  /* 48px */
.w-20 { width: var(--spacing-20); }  /* 64px */
.w-24 { width: var(--spacing-24); }  /* 80px */
.w-32 { width: var(--spacing-32); }  /* 96px */
.w-40 { width: var(--spacing-40); }  /* 128px */
.w-48 { width: var(--spacing-48); }  /* 160px */
.w-56 { width: var(--spacing-56); }  /* 192px */
.w-64 { width: var(--spacing-64); }  /* 224px */
.w-80 { width: var(--spacing-80); }  /* 256px */
.w-96 { width: var(--spacing-96); }  /* 288px */

/* Width by fraction (percentage) */
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }
.w-1\/5 { width: 20%; }
.w-2\/5 { width: 40%; }
.w-3\/5 { width: 60%; }
.w-4\/5 { width: 80%; }
.w-1\/6 { width: 16.666667%; }
.w-5\/6 { width: 83.333333%; }

/* Width by container scale (Tailwind) */
.w-3xs { width: var(--width-3xs); }
.w-2xs { width: var(--width-2xs); }
.w-xs { width: var(--width-xs); }
.w-sm { width: var(--width-sm); }
.w-md { width: var(--width-md); }
.w-lg { width: var(--width-lg); }
.w-xl { width: var(--width-xl); }
.w-2xl { width: var(--width-2xl); }
.w-3xl { width: var(--width-3xl); }
.w-4xl { width: var(--width-4xl); }
.w-5xl { width: var(--width-5xl); }
.w-6xl { width: var(--width-6xl); }
.w-7xl { width: var(--width-7xl); }

/* Width special */
.w-auto { width: auto; }
.w-px { width: 1px; }
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-dvw { width: 100dvw; }
.w-svw { width: 100svw; }
.w-lvw { width: 100lvw; }
.w-min { width: min-content; }
.w-max { width: max-content; }
.w-fit { width: fit-content; }

/* ========== HEIGHT ========== */

/* Height by spacing scale */
.h-0 { height: var(--spacing-0); }
.h-1 { height: var(--spacing-1); }
.h-2 { height: var(--spacing-2); }
.h-3 { height: var(--spacing-3); }
.h-4 { height: var(--spacing-4); }
.h-5 { height: var(--spacing-5); }
.h-6 { height: var(--spacing-6); }
.h-8 { height: var(--spacing-8); }
.h-10 { height: var(--spacing-10); }
.h-12 { height: var(--spacing-12); }
.h-16 { height: var(--spacing-16); }
.h-20 { height: var(--spacing-20); }
.h-24 { height: var(--spacing-24); }
.h-32 { height: var(--spacing-32); }
.h-40 { height: var(--spacing-40); }
.h-48 { height: var(--spacing-48); }
.h-56 { height: var(--spacing-56); }
.h-64 { height: var(--spacing-64); }
.h-80 { height: var(--spacing-80); }
.h-96 { height: var(--spacing-96); }

/* Height by fraction (percentage) */
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }
.h-2\/3 { height: 66.666667%; }
.h-1\/4 { height: 25%; }
.h-2\/4 { height: 50%; }
.h-3\/4 { height: 75%; }
.h-1\/5 { height: 20%; }
.h-2\/5 { height: 40%; }
.h-3\/5 { height: 60%; }
.h-4\/5 { height: 80%; }
.h-1\/6 { height: 16.666667%; }
.h-2\/6 { height: 33.333333%; }
.h-3\/6 { height: 50%; }
.h-4\/6 { height: 66.666667%; }
.h-5\/6 { height: 83.333333%; }

/* Height special */
.h-auto { height: auto; }
.h-px { height: 1px; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-dvh { height: 100dvh; }
.h-svh { height: 100svh; }
.h-lvh { height: 100lvh; }
.h-min { height: min-content; }
.h-max { height: max-content; }
.h-fit { height: fit-content; }

/* ========== MIN-WIDTH / MAX-WIDTH ========== */

.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }
.min-w-fit { min-width: fit-content; }

.max-w-0 { max-width: 0; }
.max-w-1 { max-width: var(--spacing-1); }
.max-w-2 { max-width: var(--spacing-2); }
.max-w-3 { max-width: var(--spacing-3); }
.max-w-4 { max-width: var(--spacing-4); }
.max-w-5 { max-width: var(--spacing-5); }
.max-w-6 { max-width: var(--spacing-6); }
.max-w-8 { max-width: var(--spacing-8); }
.max-w-10 { max-width: var(--spacing-10); }
.max-w-12 { max-width: var(--spacing-12); }
.max-w-16 { max-width: var(--spacing-16); }
.max-w-20 { max-width: var(--spacing-20); }
.max-w-24 { max-width: var(--spacing-24); }
.max-w-32 { max-width: var(--spacing-32); }
.max-w-40 { max-width: var(--spacing-40); }
.max-w-48 { max-width: var(--spacing-48); }
.max-w-56 { max-width: var(--spacing-56); }
.max-w-64 { max-width: var(--spacing-64); }
.max-w-80 { max-width: var(--spacing-80); }
.max-w-96 { max-width: var(--spacing-96); }
.max-w-full { max-width: 100%; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }
.max-w-fit { max-width: fit-content; }
.max-w-3xs { max-width: var(--width-3xs); }
.max-w-2xs { max-width: var(--width-2xs); }
.max-w-xs { max-width: var(--width-xs); }
.max-w-sm { max-width: var(--width-sm); }
.max-w-md { max-width: var(--width-md); }
.max-w-lg { max-width: var(--width-lg); }
.max-w-xl { max-width: var(--width-xl); }
.max-w-2xl { max-width: var(--width-2xl); }
.max-w-3xl { max-width: var(--width-3xl); }
.max-w-4xl { max-width: var(--width-4xl); }
.max-w-5xl { max-width: var(--width-5xl); }
.max-w-6xl { max-width: var(--width-6xl); }
.max-w-7xl { max-width: var(--width-7xl); }

/* ========== MIN-HEIGHT / MAX-HEIGHT ========== */

.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-h-min { min-height: min-content; }
.min-h-max { min-height: max-content; }
.min-h-fit { min-height: fit-content; }

.max-h-0 { max-height: 0; }
.max-h-full { max-height: 100%; }
.max-h-screen { max-height: 100vh; }
.max-h-min { max-height: min-content; }
.max-h-max { max-height: max-content; }
.max-h-fit { max-height: fit-content; }

/* ========== SIZE (width + height equal) ========== */

.size-0 { width: var(--spacing-0); height: var(--spacing-0); }
.size-1 { width: var(--spacing-1); height: var(--spacing-1); }
.size-2 { width: var(--spacing-2); height: var(--spacing-2); }
.size-3 { width: var(--spacing-3); height: var(--spacing-3); }
.size-4 { width: var(--spacing-4); height: var(--spacing-4); }
.size-5 { width: var(--spacing-5); height: var(--spacing-5); }
.size-6 { width: var(--spacing-6); height: var(--spacing-6); }
.size-8 { width: var(--spacing-8); height: var(--spacing-8); }
.size-10 { width: var(--spacing-10); height: var(--spacing-10); }
.size-12 { width: var(--spacing-12); height: var(--spacing-12); }
.size-16 { width: var(--spacing-16); height: var(--spacing-16); }
.size-20 { width: var(--spacing-20); height: var(--spacing-20); }
.size-24 { width: var(--spacing-24); height: var(--spacing-24); }
.size-32 { width: var(--spacing-32); height: var(--spacing-32); }
.size-40 { width: var(--spacing-40); height: var(--spacing-40); }
.size-48 { width: var(--spacing-48); height: var(--spacing-48); }
.size-56 { width: var(--spacing-56); height: var(--spacing-56); }
.size-64 { width: var(--spacing-64); height: var(--spacing-64); }
.size-80 { width: var(--spacing-80); height: var(--spacing-80); }
.size-96 { width: var(--spacing-96); height: var(--spacing-96); }
.size-px { width: 1px; height: 1px; }
.size-auto { width: auto; height: auto; }
.size-full { width: 100%; height: 100%; }
.size-min { width: min-content; height: min-content; }
.size-max { width: max-content; height: max-content; }
.size-fit { width: fit-content; height: fit-content; }