zutilities.css

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

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

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

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

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

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

.gap { column-gap: var(--column-gap, 0.5rem); row-gap: var(--row-gap, 1rem); }
.gap-half { column-gap: 0.25rem; row-gap: 0.5rem; }

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

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

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

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

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

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

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

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

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

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

.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); }

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

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

/****************************************************************
* SVG colors
*****************************************************************/
.colorize-black { filter: var(--color-filter-text); }
.colorize-white { filter: var(--color-filter-text-reversed); }
.colorize-negative { filter: var(--color-filter-negative); }
.colorize-positive { filter: var(--color-filter-positive); }

/****************************************************************
* Border
*****************************************************************/
.border-0 { border-width: 0; }
.border { border-width: var(--border-size, 1px); }

.border-b { border-block-width: var(--border-size, 1px); }
.border-bs { border-block-start-width: var(--border-size, 1px); }
.border-be { border-block-end-width: var(--border-size, 1px); }

.border-i { border-inline-width: var(--border-size, 1px); }
.border-is { border-inline-start-width: var(--border-size, 1px); }
.border-ie { border-inline-end-width: var(--border-size, 1px); }

.border-main { border-color: var(--color-border); }
.border-dark { border-color: var(--color-border-dark); }

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

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

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

.relative { position: relative; }
.sticky	{ position: sticky; }

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

.b-full { block-size: 100%; }
.i-full { inline-size: 100%; }
.i-min { inline-size: min-content; }

.overflow-x-auto { overflow-x: auto; scroll-snap-type: x mandatory; }
.overflow-y-auto { overflow-y: auto; scroll-snap-type: y mandatory; }
.overflow-hidden { overflow: hidden; }

.object-contain	{ object-fit: contain; }
.object-cover {	object-fit: cover; }

.aspect-square { aspect-ratio: 1; }
.aspect-widescreen { aspect-ratio: 16 / 9; }

/****************************************************************
* Margin
*****************************************************************/
.m-0 { margin: 0; }
.m-1 { margin: var(--size-1); }
.m-2 { margin: var(--size-2); }
.m-3 { margin: var(--size-3); }
.m-4 { margin: var(--size-4); }
.m-5 { margin: var(--size-5); }
.m-6 { margin: var(--size-6); }
.m-8 { margin: var(--size-8); }
.m-10 { margin: var(--size-10); }
.m-auto { margin: auto; }

.mb-0 { margin-block: 0; }
.mb-1 { margin-block: var(--size-1); }
.mb-2 { margin-block: var(--size-2); }
.mb-3 { margin-block: var(--size-3); }
.mb-4 { margin-block: var(--size-4); }
.mb-5 { margin-block: var(--size-5); }
.mb-6 { margin-block: var(--size-6); }
.mb-8 { margin-block: var(--size-8); }
.mb-10 { margin-block: var(--size-10); }
.mb-auto { margin-block: auto; }

.mbs-0 { margin-block-start: 0; }
.mbs-1 { margin-block-start: var(--size-1); }
.mbs-2 { margin-block-start: var(--size-2); }
.mbs-3 { margin-block-start: var(--size-3); }
.mbs-4 { margin-block-start: var(--size-4); }
.mbs-5 { margin-block-start: var(--size-5); }
.mbs-6 { margin-block-start: var(--size-6); }
.mbs-8 { margin-block-start: var(--size-8); }
.mbs-10 { margin-block-start: var(--size-10); }
.mbs-auto { margin-block-start: auto; }

.mbe-0 { margin-block-end: 0; }
.mbe-1 { margin-block-end: var(--size-1); }
.mbe-2 { margin-block-end: var(--size-2); }
.mbe-3 { margin-block-end: var(--size-3); }
.mbe-4 { margin-block-end: var(--size-4); }
.mbe-5 { margin-block-end: var(--size-5); }
.mbe-6 { margin-block-end: var(--size-6); }
.mbe-8 { margin-block-end: var(--size-8); }
.mbe-10 { margin-block-end: var(--size-10); }
.mbe-auto { margin-block-end: auto; }

.mi-0 { margin-inline: 0; }
.mi-1 { margin-inline: var(--size-1); }
.mi-2 { margin-inline: var(--size-2); }
.mi-3 { margin-inline: var(--size-3); }
.mi-4 { margin-inline: var(--size-4); }
.mi-5 { margin-inline: var(--size-5); }
.mi-6 { margin-inline: var(--size-6); }
.mi-8 { margin-inline: var(--size-8); }
.mi-10 { margin-inline: var(--size-10); }
.mi-auto { margin-inline: auto; }

.mis-0 { margin-inline-start: 0; }
.mis-1 { margin-inline-start: var(--size-1); }
.mis-2 { margin-inline-start: var(--size-2); }
.mis-3 { margin-inline-start: var(--size-3); }
.mis-4 { margin-inline-start: var(--size-4); }
.mis-5 { margin-inline-start: var(--size-5); }
.mis-6 { margin-inline-start: var(--size-6); }
.mis-8 { margin-inline-start: var(--size-8); }
.mis-10 { margin-inline-start: var(--size-10); }
.mis-auto { margin-inline-start: auto; }

.mie-0 { margin-inline-end: 0; }
.mie-1 { margin-inline-end: var(--size-1); }
.mie-2 { margin-inline-end: var(--size-2); }
.mie-3 { margin-inline-end: var(--size-3); }
.mie-4 { margin-inline-end: var(--size-4); }
.mie-5 { margin-inline-end: var(--size-5); }
.mie-6 { margin-inline-end: var(--size-6); }
.mie-8 { margin-inline-end: var(--size-8); }
.mie-10 { margin-inline-end: var(--size-10); }
.mie-auto { margin-inline-end: auto; }

/****************************************************************
* Padding
*****************************************************************/
.p-0 { padding: 0; }
.p-1 { padding: var(--size-1); }
.p-2 { padding: var(--size-2); }
.p-3 { padding: var(--size-3); }
.p-4 { padding: var(--size-4); }
.p-5 { padding: var(--size-5); }
.p-6 { padding: var(--size-6); }
.p-8 { padding: var(--size-8); }
.p-10 { padding: var(--size-10); }

.pb-0 { padding-block: 0; }
.pb-1 { padding-block: var(--size-1); }
.pb-2 { padding-block: var(--size-2); }
.pb-3 { padding-block: var(--size-3); }
.pb-4 { padding-block: var(--size-4); }
.pb-5 { padding-block: var(--size-5); }
.pb-6 { padding-block: var(--size-6); }
.pb-8 { padding-block: var(--size-8); }
.pb-10 { padding-block: var(--size-10); }

.pbs-0 { padding-block-start: 0; }
.pbs-1 { padding-block-start: var(--size-1); }
.pbs-2 { padding-block-start: var(--size-2); }
.pbs-3 { padding-block-start: var(--size-3); }
.pbs-4 { padding-block-start: var(--size-4); }
.pbs-5 { padding-block-start: var(--size-5); }
.pbs-6 { padding-block-start: var(--size-6); }
.pbs-8 { padding-block-start: var(--size-8); }
.pbs-10 { padding-block-start: var(--size-10); }

.pbe-0 { padding-block-end: 0; }
.pbe-1 { padding-block-end: var(--size-1); }
.pbe-2 { padding-block-end: var(--size-2); }
.pbe-3 { padding-block-end: var(--size-3); }
.pbe-4 { padding-block-end: var(--size-4); }
.pbe-5 { padding-block-end: var(--size-5); }
.pbe-6 { padding-block-end: var(--size-6); }
.pbe-8 { padding-block-end: var(--size-8); }
.pbe-10 { padding-block-end: var(--size-10); }

.pi-0 { padding-inline: 0; }
.pi-1 { padding-inline: var(--size-1); }
.pi-2 { padding-inline: var(--size-2); }
.pi-3 { padding-inline: var(--size-3); }
.pi-4 { padding-inline: var(--size-4); }
.pi-5 { padding-inline: var(--size-5); }
.pi-6 { padding-inline: var(--size-6); }
.pi-8 { padding-inline: var(--size-8); }
.pi-10 { padding-inline: var(--size-10); }

.pis-0 { padding-inline-start: 0; }
.pis-1 { padding-inline-start: var(--size-1); }
.pis-2 { padding-inline-start: var(--size-2); }
.pis-3 { padding-inline-start: var(--size-3); }
.pis-4 { padding-inline-start: var(--size-4); }
.pis-5 { padding-inline-start: var(--size-5); }
.pis-6 { padding-inline-start: var(--size-6); }
.pis-8 { padding-inline-start: var(--size-8); }
.pis-10 { padding-inline-start: var(--size-10); }

.pie-0 { padding-inline-end: 0; }
.pie-1 { padding-inline-end: var(--size-1); }
.pie-2 { padding-inline-end: var(--size-2); }
.pie-3 { padding-inline-end: var(--size-3); }
.pie-4 { padding-inline-end: var(--size-4); }
.pie-5 { padding-inline-end: var(--size-5); }
.pie-6 { padding-inline-end: var(--size-6); }
.pie-8 { padding-inline-end: var(--size-8); }
.pie-10 { padding-inline-end: var(--size-10); }

/****************************************************************
* Hiding/Showing
*****************************************************************/
.show\@sm, .show\@md, .show\@lg { display: none; }

.show\@sm { @media (width >= 40rem) { display: flex; } }
.show\@md { @media (width >= 48rem) { display: flex; } }
.show\@lg { @media (width >= 64rem) { display: flex; } }

.hide\@sm { @media (width >= 40rem) { display: none; } }
.hide\@md { @media (width >= 48rem) { display: none; } }
.hide\@lg { @media (width >= 64rem) { display: none; } }

.hide\@pwa { @media (display-mode: standalone) { display: none; } }
.hide\@browser { @media (display-mode: browser) { display: none; } }

.hide\@print { @media print { display: none; } }

/****************************************************************
* Accessibility
*****************************************************************/
.sr-only {
  block-size: 1px;
  clip-path: inset(50%);
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}