/**
 * Utility Classes
 * Prefixed with "u-" following ITCSS conventions
 * Use sparingly - prefer component classes for most styling
 */

/* ==========================================
   Display Utilities
   ========================================== */
.u-block { display: block !important; }
.u-inline-block { display: inline-block !important; }
.u-inline { display: inline !important; }
.u-flex { display: flex !important; }
.u-inline-flex { display: inline-flex !important; }
.u-grid { display: grid !important; }
.u-hidden { display: none !important; }

/* ==========================================
   Flexbox Utilities
   ========================================== */
.u-flex-row { flex-direction: row !important; }
.u-flex-column { flex-direction: column !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-nowrap { flex-wrap: nowrap !important; }

.u-items-start { align-items: flex-start !important; }
.u-items-center { align-items: center !important; }
.u-items-end { align-items: flex-end !important; }
.u-items-stretch { align-items: stretch !important; }

.u-justify-start { justify-content: flex-start !important; }
.u-justify-center { justify-content: center !important; }
.u-justify-end { justify-content: flex-end !important; }
.u-justify-between { justify-content: space-between !important; }
.u-justify-around { justify-content: space-around !important; }

.u-flex-1 { flex: 1 1 0% !important; }
.u-flex-auto { flex: 1 1 auto !important; }
.u-flex-none { flex: none !important; }

/* Gap utilities */
.u-gap-4 { gap: var(--base-size-4) !important; }
.u-gap-8 { gap: var(--base-size-8) !important; }
.u-gap-12 { gap: var(--base-size-12) !important; }
.u-gap-16 { gap: var(--base-size-16) !important; }
.u-gap-24 { gap: var(--base-size-24) !important; }

/* ==========================================
   Spacing Utilities - Margin
   ========================================== */
.u-m-0 { margin: 0 !important; }
.u-m-4 { margin: var(--base-size-4) !important; }
.u-m-8 { margin: var(--base-size-8) !important; }
.u-m-12 { margin: var(--base-size-12) !important; }
.u-m-16 { margin: var(--base-size-16) !important; }
.u-m-24 { margin: var(--base-size-24) !important; }
.u-m-32 { margin: var(--base-size-32) !important; }

/* Margin top */
.u-mt-0 { margin-top: 0 !important; }
.u-mt-4 { margin-top: var(--base-size-4) !important; }
.u-mt-8 { margin-top: var(--base-size-8) !important; }
.u-mt-12 { margin-top: var(--base-size-12) !important; }
.u-mt-16 { margin-top: var(--base-size-16) !important; }
.u-mt-24 { margin-top: var(--base-size-24) !important; }
.u-mt-32 { margin-top: var(--base-size-32) !important; }

/* Margin right */
.u-mr-0 { margin-right: 0 !important; }
.u-mr-4 { margin-right: var(--base-size-4) !important; }
.u-mr-8 { margin-right: var(--base-size-8) !important; }
.u-mr-12 { margin-right: var(--base-size-12) !important; }
.u-mr-16 { margin-right: var(--base-size-16) !important; }

/* Margin bottom */
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-4 { margin-bottom: var(--base-size-4) !important; }
.u-mb-8 { margin-bottom: var(--base-size-8) !important; }
.u-mb-12 { margin-bottom: var(--base-size-12) !important; }
.u-mb-16 { margin-bottom: var(--base-size-16) !important; }
.u-mb-24 { margin-bottom: var(--base-size-24) !important; }
.u-mb-32 { margin-bottom: var(--base-size-32) !important; }

/* Margin left */
.u-ml-0 { margin-left: 0 !important; }
.u-ml-4 { margin-left: var(--base-size-4) !important; }
.u-ml-8 { margin-left: var(--base-size-8) !important; }
.u-ml-12 { margin-left: var(--base-size-12) !important; }
.u-ml-16 { margin-left: var(--base-size-16) !important; }

/* Margin inline (horizontal) */
.u-mx-auto { margin-inline: auto !important; }
.u-mx-0 { margin-inline: 0 !important; }
.u-mx-4 { margin-inline: var(--base-size-4) !important; }
.u-mx-8 { margin-inline: var(--base-size-8) !important; }
.u-mx-16 { margin-inline: var(--base-size-16) !important; }

/* Margin block (vertical) */
.u-my-0 { margin-block: 0 !important; }
.u-my-4 { margin-block: var(--base-size-4) !important; }
.u-my-8 { margin-block: var(--base-size-8) !important; }
.u-my-16 { margin-block: var(--base-size-16) !important; }

/* ==========================================
   Spacing Utilities - Padding
   ========================================== */
.u-p-0 { padding: 0 !important; }
.u-p-4 { padding: var(--base-size-4) !important; }
.u-p-8 { padding: var(--base-size-8) !important; }
.u-p-12 { padding: var(--base-size-12) !important; }
.u-p-16 { padding: var(--base-size-16) !important; }
.u-p-24 { padding: var(--base-size-24) !important; }
.u-p-32 { padding: var(--base-size-32) !important; }

/* Padding top */
.u-pt-0 { padding-top: 0 !important; }
.u-pt-4 { padding-top: var(--base-size-4) !important; }
.u-pt-8 { padding-top: var(--base-size-8) !important; }
.u-pt-12 { padding-top: var(--base-size-12) !important; }
.u-pt-16 { padding-top: var(--base-size-16) !important; }
.u-pt-24 { padding-top: var(--base-size-24) !important; }

/* Padding right */
.u-pr-0 { padding-right: 0 !important; }
.u-pr-4 { padding-right: var(--base-size-4) !important; }
.u-pr-8 { padding-right: var(--base-size-8) !important; }
.u-pr-12 { padding-right: var(--base-size-12) !important; }
.u-pr-16 { padding-right: var(--base-size-16) !important; }

/* Padding bottom */
.u-pb-0 { padding-bottom: 0 !important; }
.u-pb-4 { padding-bottom: var(--base-size-4) !important; }
.u-pb-8 { padding-bottom: var(--base-size-8) !important; }
.u-pb-12 { padding-bottom: var(--base-size-12) !important; }
.u-pb-16 { padding-bottom: var(--base-size-16) !important; }
.u-pb-24 { padding-bottom: var(--base-size-24) !important; }

/* Padding left */
.u-pl-0 { padding-left: 0 !important; }
.u-pl-4 { padding-left: var(--base-size-4) !important; }
.u-pl-8 { padding-left: var(--base-size-8) !important; }
.u-pl-12 { padding-left: var(--base-size-12) !important; }
.u-pl-16 { padding-left: var(--base-size-16) !important; }

/* Padding inline (horizontal) */
.u-px-0 { padding-inline: 0 !important; }
.u-px-4 { padding-inline: var(--base-size-4) !important; }
.u-px-8 { padding-inline: var(--base-size-8) !important; }
.u-px-12 { padding-inline: var(--base-size-12) !important; }
.u-px-16 { padding-inline: var(--base-size-16) !important; }
.u-px-24 { padding-inline: var(--base-size-24) !important; }

/* Padding block (vertical) */
.u-py-0 { padding-block: 0 !important; }
.u-py-4 { padding-block: var(--base-size-4) !important; }
.u-py-8 { padding-block: var(--base-size-8) !important; }
.u-py-12 { padding-block: var(--base-size-12) !important; }
.u-py-16 { padding-block: var(--base-size-16) !important; }

/* ==========================================
   Text Alignment
   ========================================== */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }

/* ==========================================
   Text Utilities
   ========================================== */
.u-text-bold { font-weight: var(--text-body-weight-bold) !important; }
.u-text-semibold { font-weight: var(--text-body-weight-semibold) !important; }
.u-text-medium { font-weight: var(--text-body-weight-medium) !important; }
.u-text-normal { font-weight: var(--text-body-weight-normal) !important; }

.u-text-uppercase { text-transform: uppercase !important; }
.u-text-lowercase { text-transform: lowercase !important; }
.u-text-capitalize { text-transform: capitalize !important; }

.u-text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* ==========================================
   Position Utilities
   ========================================== */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-sticky { position: sticky !important; }

/* ==========================================
   Width & Height
   ========================================== */
.u-width-full { width: 100% !important; }
.u-width-auto { width: auto !important; }

.u-height-full { height: 100% !important; }
.u-height-auto { height: auto !important; }

/* ==========================================
   Border Radius
   ========================================== */
.u-rounded-small { border-radius: var(--borderRadius-small) !important; }
.u-rounded-medium { border-radius: var(--borderRadius-medium) !important; }
.u-rounded-large { border-radius: var(--borderRadius-large) !important; }
.u-rounded-full { border-radius: var(--borderRadius-full) !important; }

/* ==========================================
   Visibility
   ========================================== */
.u-visible { visibility: visible !important; }
.u-invisible { visibility: hidden !important; }

.u-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}