.ui-width\@0 {
  width: 0 !important;
}
.ui-width\@xs {
  width: var(--ui-space-xs) !important;
}
.ui-width\@s {
  width: var(--ui-space-s) !important;
}
.ui-width\@m {
  width: var(--ui-space-m) !important;
}
.ui-width\@l {
  width: var(--ui-space-l) !important;
}
.ui-width\@xl {
  width: var(--ui-space-xl) !important;
}
.ui-width\@2xl {
  width: var(--ui-space-2xl) !important;
}
.ui-width\@3xl {
  width: var(--ui-space-3xl) !important;
}
.ui-width\@auto {
  width: auto !important;
}
.ui-width\@full {
  width: 100% !important;
}
.ui-width\@screen {
  width: 100vw !important;
}
.ui-width\@fit {
  width: fit-content !important;
}
.ui-width\@min {
  width: min-content !important;
}
.ui-width\@max {
  width: max-content !important;
}
.ui-width\@1\/2 {
  width: 50% !important;
}
.ui-width\@1\/3 {
  width: 33.333% !important;
}
.ui-width\@2\/3 {
  width: 66.667% !important;
}
.ui-width\@1\/4 {
  width: 25% !important;
}
.ui-width\@3\/4 {
  width: 75% !important;
}

.ui-min-width\@0 {
  min-width: 0 !important;
}
.ui-min-width\@xs {
  min-width: var(--ui-space-xs) !important;
}
.ui-min-width\@s {
  min-width: var(--ui-space-s) !important;
}
.ui-min-width\@m {
  min-width: var(--ui-space-m) !important;
}
.ui-min-width\@l {
  min-width: var(--ui-space-l) !important;
}
.ui-min-width\@xl {
  min-width: var(--ui-space-xl) !important;
}
.ui-min-width\@2xl {
  min-width: var(--ui-space-2xl) !important;
}
.ui-min-width\@3xl {
  min-width: var(--ui-space-3xl) !important;
}
.ui-min-width\@full {
  min-width: 100% !important;
}
.ui-min-width\@fit {
  min-width: fit-content !important;
}
.ui-min-width\@min {
  min-width: min-content !important;
}
.ui-min-width\@max {
  min-width: max-content !important;
}

.ui-max-width\@none {
  max-width: none !important;
}
.ui-max-width\@xs {
  max-width: var(--ui-space-xs) !important;
}
.ui-max-width\@s {
  max-width: var(--ui-space-s) !important;
}
.ui-max-width\@m {
  max-width: var(--ui-space-m) !important;
}
.ui-max-width\@l {
  max-width: var(--ui-space-l) !important;
}
.ui-max-width\@xl {
  max-width: var(--ui-space-xl) !important;
}
.ui-max-width\@2xl {
  max-width: var(--ui-space-2xl) !important;
}
.ui-max-width\@3xl {
  max-width: var(--ui-space-3xl) !important;
}
.ui-max-width\@full {
  max-width: 100% !important;
}
.ui-max-width\@screen {
  max-width: 100vw !important;
}
.ui-max-width\@fit {
  max-width: fit-content !important;
}

.ui-height\@0 {
  height: 0 !important;
}
.ui-height\@xs {
  height: var(--ui-space-xs) !important;
}
.ui-height\@s {
  height: var(--ui-space-s) !important;
}
.ui-height\@m {
  height: var(--ui-space-m) !important;
}
.ui-height\@l {
  height: var(--ui-space-l) !important;
}
.ui-height\@xl {
  height: var(--ui-space-xl) !important;
}
.ui-height\@2xl {
  height: var(--ui-space-2xl) !important;
}
.ui-height\@3xl {
  height: var(--ui-space-3xl) !important;
}
.ui-height\@auto {
  height: auto !important;
}
.ui-height\@full {
  height: 100% !important;
}
.ui-height\@screen {
  height: 100vh !important;
}
.ui-height\@fit {
  height: fit-content !important;
}
.ui-height\@min {
  height: min-content !important;
}
.ui-height\@max {
  height: max-content !important;
}

.ui-min-height\@0 {
  min-height: 0 !important;
}
.ui-min-height\@xs {
  min-height: var(--ui-space-xs) !important;
}
.ui-min-height\@s {
  min-height: var(--ui-space-s) !important;
}
.ui-min-height\@m {
  min-height: var(--ui-space-m) !important;
}
.ui-min-height\@l {
  min-height: var(--ui-space-l) !important;
}
.ui-min-height\@xl {
  min-height: var(--ui-space-xl) !important;
}
.ui-min-height\@2xl {
  min-height: var(--ui-space-2xl) !important;
}
.ui-min-height\@3xl {
  min-height: var(--ui-space-3xl) !important;
}
.ui-min-height\@full {
  min-height: 100% !important;
}
.ui-min-height\@screen {
  min-height: 100vh !important;
}
.ui-min-height\@fit {
  min-height: fit-content !important;
}

.ui-max-height\@none {
  max-height: none !important;
}
.ui-max-height\@xs {
  max-height: var(--ui-space-xs) !important;
}
.ui-max-height\@s {
  max-height: var(--ui-space-s) !important;
}
.ui-max-height\@m {
  max-height: var(--ui-space-m) !important;
}
.ui-max-height\@l {
  max-height: var(--ui-space-l) !important;
}
.ui-max-height\@xl {
  max-height: var(--ui-space-xl) !important;
}
.ui-max-height\@2xl {
  max-height: var(--ui-space-2xl) !important;
}
.ui-max-height\@3xl {
  max-height: var(--ui-space-3xl) !important;
}
.ui-max-height\@full {
  max-height: 100% !important;
}
.ui-max-height\@screen {
  max-height: 100vh !important;
}
.ui-max-height\@fit {
  max-height: fit-content !important;
}

/* ── Fixed widths — common breakpoint pixel values ───────────────── */
.ui-width-fixed\@xs  { width: 320px  !important; }
.ui-width-fixed\@s   { width: 480px  !important; }
.ui-width-fixed\@m   { width: 640px  !important; }
.ui-width-fixed\@l   { width: 768px  !important; }
.ui-width-fixed\@xl  { width: 1024px !important; }
.ui-width-fixed\@2xl { width: 1280px !important; }
.ui-width-fixed\@3xl { width: 1440px !important; }

/* ── Fluid widths — viewport-width fractions ─────────────────────── */
.ui-width-fluid\@10  { width: 10vw  !important; }
.ui-width-fluid\@25  { width: 25vw  !important; }
.ui-width-fluid\@50  { width: 50vw  !important; }
.ui-width-fluid\@75  { width: 75vw  !important; }
.ui-width-fluid\@100 { width: 100vw !important; }

/* ── Fixed heights — common UI element pixel values ─────────────── */
.ui-height-fixed\@xs  { height: 32px  !important; }
.ui-height-fixed\@s   { height: 48px  !important; }
.ui-height-fixed\@m   { height: 64px  !important; }
.ui-height-fixed\@l   { height: 96px  !important; }
.ui-height-fixed\@xl  { height: 128px !important; }
.ui-height-fixed\@2xl { height: 192px !important; }
.ui-height-fixed\@3xl { height: 256px !important; }

/* ── Fluid heights — viewport-height fractions ───────────────────── */
.ui-height-fluid\@25  { height: 25vh  !important; }
.ui-height-fluid\@50  { height: 50vh  !important; }
.ui-height-fluid\@75  { height: 75vh  !important; }
.ui-height-fluid\@100 { height: 100vh !important; }