:root {
  --space-sm: var(--size-2); /* 8px */
  --space-md: var(--size-4); /* 16px */
  --space-lg: var(--size-8); /* 32px */
}

/****************************************************************
* Flex and Grid
*****************************************************************/
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.inline-flex { display: inline-flex; }

.justify-end { justify-content: end; }
.justify-start { justify-content: start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }

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

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

.self-end { align-self: end; }
.self-start { align-self: start; }
.self-center { align-self: center; }

.gap {
  column-gap: var(--column-gap, var(--space-md));
  row-gap: var(--row-gap, var(--space-md));
}

/****************************************************************
* Alignment
*****************************************************************/
.align-top { vertical-align: top; }
.align-bottom { vertical-align: bottom; }
.align-middle { vertical-align: middle; }

.text-start { text-align: start; }
.text-end { text-align: end; }
.text-center { text-align: center; }

/****************************************************************
* Text
*****************************************************************/
.font-normal { font-weight: var(--font-normal); font-style: normal; }
.font-medium { font-weight: var(--font-medium); }
.font-bold { font-weight: var(--font-bold); }

.underline { text-decoration-line: underline; }
.no-underline	{ text-decoration-line: none; }

.uppercase { text-transform: uppercase; }
.normal-case { text-transform: none; }

.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }

.break-words { word-break: break-word; }
.break-all { word-break: break-all; }

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

.opacity-75 { opacity: var(--opacity-75); }
.opacity-50 { opacity: var(--opacity-50); }

.leading-tight { line-height: var(--leading-tight); }
.leading-normal { line-height: var(--leading-normal); }

.text-primary { color: var(--color-text); }
.text-reversed { color: var(--color-text-reversed); }
.text-subtle { color: var(--color-text-subtle); }
.text-negative { color: var(--color-negative); }
.text-positive { color: var(--color-positive); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }
.text-4xl { font-size: var(--text-4xl); }
.text-5xl { font-size: var(--text-5xl); }

/****************************************************************
* Background
*****************************************************************/
.bg-main { background-color: var(--color-bg); }
.bg-white { background-color: var(--color-text-reversed); }
.bg-surface { background-color: var(--color-bg-surface); }
.bg-transparent { background-color: transparent; }

/****************************************************************
* Border
*****************************************************************/
.border { border: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
.border-t { border-top: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
.border-b { border-bottom: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
.border-l { border-left: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
.border-r { border-right: var(--border-size, 1px) solid var(--border-color, var(--color-border)); }
.border-0 { border: 0; }

.rounded-sm { border-radius: var(--rounded-sm); }
.rounded { border-radius: var(--rounded); }
.rounded-lg { border-radius: var(--rounded-lg); }
.rounded-full { border-radius: var(--rounded-full); }

/****************************************************************
* Shadow
*****************************************************************/
.shadow { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/****************************************************************
* Layout
*****************************************************************/
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }

.relative { position: relative; }

.min-w-0 { min-inline-size: 0; }
.max-w-full { max-inline-size: 100%; }

.h-full { block-size: 100%; }
.w-full { inline-size: 100%; }

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

/****************************************************************
* Margin
*****************************************************************/
.m-0 { margin: 0; }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }

.mb-0 { margin-block: 0; }
.mb-sm { margin-block: var(--space-sm); }
.mb-md { margin-block: var(--space-md); }
.mb-lg { margin-block: var(--space-lg); }

.mbs-0 { margin-block-start: 0; }
.mbs-sm { margin-block-start: var(--space-sm); }
.mbs-md { margin-block-start: var(--space-md); }
.mbs-lg { margin-block-start: var(--space-lg); }

.mbe-0 { margin-block-end: 0; }
.mbe-sm { margin-block-end: var(--space-sm); }
.mbe-md { margin-block-end: var(--space-md); }
.mbe-lg { margin-block-end: var(--space-lg); }

.mi-0 { margin-inline: 0; }
.mi-sm { margin-inline: var(--space-sm); }
.mi-md { margin-inline: var(--space-md); }
.mi-lg { margin-inline: var(--space-lg); }

.mis-0 { margin-inline-start: 0; }
.mis-sm { margin-inline-start: var(--space-sm); }
.mis-md { margin-inline-start: var(--space-md); }
.mis-lg { margin-inline-start: var(--space-lg); }

.mie-0 { margin-inline-end: 0; }
.mie-sm { margin-inline-end: var(--space-sm); }
.mie-md { margin-inline-end: var(--space-md); }
.mie-lg { margin-inline-end: var(--space-lg); }

.mi-auto { margin-inline: auto; }
.mb-auto { margin-block: auto; }

/****************************************************************
* Padding
*****************************************************************/
.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

.pb-0 { padding-block: 0; }
.pb-sm { padding-block: var(--space-sm); }
.pb-md { padding-block: var(--space-md); }
.pb-lg { padding-block: var(--space-lg); }

.pbs-0 { padding-block-start: 0; }
.pbs-sm { padding-block-start: var(--space-sm); }
.pbs-md { padding-block-start: var(--space-md); }
.pbs-lg { padding-block-start: var(--space-lg); }

.pbe-0 { padding-block-end: 0; }
.pbe-sm { padding-block-end: var(--space-sm); }
.pbe-md { padding-block-end: var(--space-md); }
.pbe-lg { padding-block-end: var(--space-lg); }

.pi-0 { padding-inline: 0; }
.pi-sm { padding-inline: var(--space-sm); }
.pi-md { padding-inline: var(--space-md); }
.pi-lg { padding-inline: var(--space-lg); }

.pis-0 { padding-inline-start: 0; }
.pis-sm { padding-inline-start: var(--space-sm); }
.pis-md { padding-inline-start: var(--space-md); }
.pis-lg { padding-inline-start: var(--space-lg); }

.pie-0 { padding-inline-end: 0; }
.pie-sm { padding-inline-end: var(--space-sm); }
.pie-md { padding-inline-end: var(--space-md); }
.pie-lg { padding-inline-end: var(--space-lg); }