gmx.css/dist/gmx.css

A micro Material Design 3 based CSS-only framework.

:root,body.light {
  --primary: #6750a4;
  --on-primary: #ffffff;
  --primary-container: #e9ddff;
  --on-primary-container: #22005d;
  --secondary: #625b71;
  --on-secondary: #ffffff;
  --secondary-container: #e8def8;
  --on-secondary-container: #1e192b;
  --tertiary: #7e5260;
  --on-tertiary: #ffffff;
  --tertiary-container: #ffd9e3;
  --on-tertiary-container: #31101d;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: #fffbff;
  --on-background: #1c1b1e;
  --surface: #fdf8fd;
  --on-surface: #1c1b1e;
  --surface-variant: #e7e0eb;
  --on-surface-variant: #49454e;
  --outline: #7a757f;
  --outline-variant: #cac4cf;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #313033;
  --inverse-on-surface: #f4eff4;
  --inverse-primary: #cfbcff;
  --surface-dim: #ddd8dd;
  --surface-bright: #fdf8fd;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f2f7;
  --surface-container: #f2ecf1;
  --surface-container-high: #ece7eb;
  --surface-container-highest: #e6e1e6
}

body.dark {
  --primary: #cfbcff;
  --on-primary: #381e72;
  --primary-container: #4f378a;
  --on-primary-container: #e9ddff;
  --secondary: #cbc2db;
  --on-secondary: #332d41;
  --secondary-container: #4a4458;
  --on-secondary-container: #e8def8;
  --tertiary: #efb8c8;
  --on-tertiary: #4a2532;
  --tertiary-container: #633b48;
  --on-tertiary-container: #ffd9e3;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: #1c1b1e;
  --on-background: #e6e1e6;
  --surface: #141316;
  --on-surface: #e6e1e6;
  --surface-variant: #49454e;
  --on-surface-variant: #cac4cf;
  --outline: #948f99;
  --outline-variant: #49454e;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e6e1e6;
  --inverse-on-surface: #313033;
  --inverse-primary: #6750a4;
  --surface-dim: #141316;
  --surface-bright: #3a383c;
  --surface-container-lowest: #0f0e11;
  --surface-container-low: #1c1b1e;
  --surface-container: #201f22;
  --surface-container-high: #2b292d;
  --surface-container-highest: #363438;
  color-scheme: dark;
}

:root {
  --elevation-0: none;
  --elevation-1: 0px 1px 2px 0px rgb(from var(--shadow) r g b / .3), 0px 1px 3px 1px rgb(from var(--shadow) r g b / .15);
  --elevation-2: 0px 1px 2px 0px rgb(from var(--shadow) r g b / .3), 0px 2px 6px 2px rgb(from var(--shadow) r g b / .15);
  --elevation-3: 0px 1px 3px 0px rgb(from var(--shadow) r g b / .3), 0px 4px 8px 3px rgb(from var(--shadow) r g b / .15);
  --elevation-4: 0px 2px 3px 0px rgb(from var(--shadow) r g b / .3), 0px 6px 10px 4px rgb(from var(--shadow) r g b / .15);
  --elevation-5: 0px 4px 4px 0px rgb(from var(--shadow) r g b / .3), 0px 8px 12px 6px rgb(from var(--shadow) r g b / .15);
  --bottom-offset: 0;
  --density: 0;
  --density-term: calc(var(--density) * .25rem);
  --rounding-none: 0;
  --rounding-extra-small: 0.25rem;
  --rounding-small: 0.5rem;
  --rounding-medium: 0.75rem;
  --rounding-large: 1.25rem;
  --rounding-extra-large: 1.75rem;
  --rounding-full: calc(infinity * 1px);
  --font: roboto, "Roboto Variable", system-ui, sans-serif;
  --easing-fast-spatial: cubic-bezier(0.42, 1.67, 0.21, 0.9) 0.35s;
  --easing-spatial: cubic-bezier(0.38, 1.21, 0.22, 1) 0.5s;
  --easing-slow-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98) 0.65s;
  --easing-fast: cubic-bezier(0.31, 0.94, 0.34, 1) 0.15s;
  --easing: cubic-bezier(0.34, 0.8, 0.34, 1) 0.2s;
  --easing-slow: cubic-bezier(0.34, 0.88, 0.34, 1) 0.3s;
  --curve: linear(0, 0.034 6%, 0.073 9%, 0.126 11%, 0.194 13%, 0.273 15%, 0.351 16%, 0.541 18%, 0.652 20%, 0.755 24%, 0.839 30%, 0.91 39%, 0.959 53%, 0.989 72%, 1);
  --curve-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --curve-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
}

:root {
  --snackbar-shape: var(--rounding-extra-small);
  --segmented-button-shape: var(--rounding-full);
  --button-shape: 1.25rem;
  --group-icon-button-shape: 3rem;
  --chip-shape: var(--rounding-small);
  --textfield-outlined-shape: var(--rounding-extra-small);
  --textfield-filled-shape: var(--rounding-extra-small);
  --datefield-shape: var(--rounding-extra-small);
  --date-picker-shape: var(--rounding-large);
  --slider-track-out-shape: 0.5rem;
  --slider-track-in-shape: 0.125rem;
  --slider-thumb-shape: var(--rounding-full);
  --menu-shape: var(--rounding-extra-small);
  --linear-progress-shape: var(--rounding-full);
  --bottom-sheet-shape: var(--rounding-extra-large);
  --card-shape: var(--rounding-medium);
  --fab-small-shape: var(--rounding-small);
  --fab-normal-shape: var(--rounding-large);
  --fab-large-shape: var(--rounding-extra-large);
  --dialog-shape: var(--rounding-extra-large);
  --checkbox-shape: 0.175rem;
  --radio-shape: var(--rounding-full);
  --switch-track-shape: var(--rounding-full);
  --switch-handle-shape: var(--rounding-full);
}

@font-face {
  font-family: 'Roboto Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/roboto:vf@latest/latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  max-width: 100%;
}

html,
body {
  margin: 0;
}

body {
  font-family: var(--font);
  font-size: 1rem;
  letter-spacing: 0.03125rem;
  line-height: 1.5rem;
  background: var(--background);
  color: var(--on-background);
  min-height: 100vh;
}

main {
  display: flex;
  min-height: 100vh;
}

:is(a, button, .btn, .chip):focus-visible {
  outline: 0.125rem solid var(--primary);
  outline-offset: 0.25rem;
}

[disabled] {
  color: rgb(from var(--on-surface) r g b / 38%);
  pointer-events: none;
}

img[width][height] {
  height: auto;
}

img.btn {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border: none;
}

summary {
  cursor: pointer;
}

a {
  text-decoration: none;
}

iconify-icon:not(aside iconify-icon, iconify-icon[width][height]) {
  display: inline-block;
  line-height: 0;
  width: 1em;
  height: 1em;
  max-width: none;
}

.chip input,
.tabs input,
.group input {
  padding: 0;
  height: initial;
  width: initial;
  margin-bottom: 0;
  display: none;
  cursor: pointer;
}

.radio,
.checkbox,
.switch {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

@keyframes opacity {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

:where(button, .btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border: 1px solid transparent;
  border-radius: var(--button-shape);
  color: var(--on-primary);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: normal;
  height: calc(2.5rem + var(--density-term));
  padding: 0 1rem;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  outline: 1px solid transparent;
  transition: border-radius var(--easing-fast-spatial), box-shadow var(--easing-fast), background-color var(--easing-fast), color var(--easing-fast), margin var(--easing-fast), padding var(--easing-fast-spatial);
}

:where(button, .btn):hover {
  background: rgb(from var(--primary) r g b / 90%);
  box-shadow: var(--elevation-1);
}

:where(button, .btn) iconify-icon {
  font-size: 1.125rem;
  margin: 0 0.5rem 0 0;
}

:where(button, .btn).tonal,
:is(.group, .split).tonal :where(button, .btn) {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

:where(button, .btn).tonal:hover,
.chip:has(input:checked):hover,
:is(.group, .split).tonal :where(button, .btn):hover {
  background: rgb(from var(--primary) r g b / 20%);
}

.group.tonal :where(button, .btn):has(input:checked) {
  background: var(--secondary);
}

:where(button, .btn).text,
:where(button, .btn).outline,
:is(.split).outline :where(button, .btn) {
  box-shadow: none;
  background: transparent;
  color: var(--primary);
}

:where(button, .btn).text:hover,
:where(button, .btn).outline:hover,
:is(.split).outline :where(button, .btn):hover,
.tabs>label:has(input:checked):hover {
  box-shadow: none;
  background: rgb(from var(--primary) r g b / 10%);
}

:where(button, .btn).outline,
:is(.split).outline :where(button, .btn) {
  border: 0.0625rem solid var(--outline);
}

:where(button, .btn).text {
  padding: 0.8rem 0.8rem;
}

:where(button, .btn).elevated,
:is(.split).elevated :where(button, .btn) {
  background: var(--surface-container-low);
  color: var(--primary);
  box-shadow: var(--elevation-1) !important;
}

:where(button, .btn).elevated:hover,
:is(.split).elevated :where(button, .btn):hover {
  background: rgb(from var(--primary) r g b / 15%);
  box-shadow: var(--elevation-2) !important;
}

main>aside li:not(.active):hover iconify-icon,
.menu>*:hover,
.chip:hover,
.tabs>*:hover {
  background: var(--surface-container-highest);
}

:where(button, .btn):is(.icon, .fab:not(.extended)) {
  aspect-ratio: 1/1;
  width: var(--size);
  height: var(--size);
}

:where(button, .btn):is(.icon, .fab.small) {
  --size: 2.5rem;
}

:where(button, .btn).chip.icon {
  --size: 2rem;
}

:is(button, .btn, .fab):not(.flat):active {
  border-radius: var(--rounding-small);
}

:where(button, .btn):is(.icon, .fab) iconify-icon,
.group.icons iconify-icon {
  font-size: 1.5rem;
  margin-right: 0;
}

:where(button, .btn).fab.small {
  border-radius: var(--fab-small-shape);
}

:where(button, .btn).fab {
  --size: 3.5rem;
  box-shadow: var(--elevation-2);
  border-radius: var(--fab-normal-shape);
}

:where(button, .btn).fab.large {
  --size: 5.5rem;
  border-radius: var(--fab-large-shape);
}

:where(button, .btn).fab.large iconify-icon {
  font-size: 2.5rem;
}

:where(button, .btn).fab.extended {
  width: auto;
}

:where(button, .btn).fab.extended iconify-icon {
  margin-right: 0.5rem;
}

:is(.group, .split) {
  display: flex;
  gap: 0.125rem;
}

.group:not(.variable) :where(button, .btn) {
  width: 100%;
}

.group.variable {
  display: flex;
  align-items: center;
  justify-content: center;
}

.group :where(button, .btn) {
  background: var(--surface-container);
  color: var(--on-surface-variant);
  border-radius: var(--rounding-medium);
}

.group :where(button, .btn):hover {
  box-shadow: none;
  background: var(--surface-container-highest);
}

.split> :where(button, .btn):active {
  border-radius: var(--button-shape) !important;
}

.group :where(button, .btn):has(input:checked) {
  border-radius: var(--button-shape);
  background: var(--primary);
  color: var(--on-primary);
}

.split> :where(button, .btn):first-child,
.group:not(.icons) :where(button, .btn):first-child:active {
  border-radius: var(--button-shape) var(--rounding-small) var(--rounding-small) var(--button-shape);
}

.split> :where(button, .btn):last-child,
.group:not(.icons) :where(button, .btn):last-child:active {
  border-radius: var(--rounding-small) var(--button-shape) var(--button-shape) var(--rounding-small);
}

.group> :where(button, .btn):first-child,
.split> :where(button, .btn):first-child:hover {
  border-radius: var(--button-shape) var(--rounding-medium) var(--rounding-medium) var(--button-shape);
}

.group> :where(button, .btn):last-child,
.split> :where(button, .btn):last-child:hover {
  border-radius: var(--rounding-medium) var(--button-shape) var(--button-shape) var(--rounding-medium);
}

.group.icons {
  gap: .5rem;
}

.group.icons :where(button, .btn) {
  --size: 4.25rem;
  height: var(--size);
  border-radius: var(--group-icon-button-shape);
}

.group.icons.large :where(button, .btn) {
  --size: 5rem;
}

.group.icons.extra :where(button, .btn) {
  --size: 6rem;
}

.group.icons :where(button, .btn):has(input:checked) {
  border-radius: var(--rounding-large);
}

.group.icons :where(button, .btn):active,
.physics :where(button, .btn):active {
  padding: 0 2rem;
}

.group.icons :where(button, .btn) iconify-icon {
  font-size: 2rem;
}

.group .extended {
  font-size: 1.25rem;
  font-weight: 400;
}

.group .extended iconify-icon {
  margin-right: 1rem;
}

.card {
  padding: 1rem;
  background: var(--surface-container-low);
  color: var(--on-surface);
  box-shadow: var(--elevation-1);
  border-radius: var(--card-shape);
}

.container:not(:has(>header, >footer)),
.container>header,
.container:not(.min)>footer {
  padding: 1rem;
  border-radius: var(--rounding-extra-large);
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.container.min>footer {
  padding: 1rem 0;
}

.container:has(>header, >footer) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.container>header {
  flex-grow: 1;
}

.container:not(.min)>header {
  border-radius: var(--rounding-extra-large) var(--rounding-extra-large) var(--rounding-small) var(--rounding-small);
}

.container:not(.min)>footer {
  border-radius: var(--rounding-small) var(--rounding-small) var(--rounding-extra-large) var(--rounding-extra-large);
}

.chip {
  height: 2rem;
  display: inline-flex;
  padding: 0.35rem 1rem;
  border-radius: var(--chip-shape);
  background: var(--surface);
  color: var(--on-surface-variant);
  border: solid 0.0625rem var(--outline);
}

.chip:not(.icon) iconify-icon {
  margin-left: -0.25rem;
}

.chip:not(.icon) iconify-icon:last-child {
  margin-left: 0.65rem;
  margin-right: -0.75rem;
}

.chip:has(input:not(:checked)):hover {
  box-shadow: none;
}

.chip:has(input:checked) {
  border-color: transparent;
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.dialog-trigger {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
}

input.dialog-trigger:not(:checked)+.dialog {
  display: none;
}

input.dialog-trigger:checked+.dialog {
  display: block;
}

:is(dialog, .dialog) {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 200;
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
  border: none;
  outline: none;
  border-radius: var(--dialog-shape);
  min-width: 35rem;
  padding: 1.5rem 1.5rem;
}

:is(dialog, .dialog).s {
  max-width: 35rem;
}

:is(dialog, .dialog).l {
  min-width: 50rem;
}

:is(dialog, .dialog) :where(iconify-icon, h1, h2, h3, h4, h5, h6) {
  display: block;
  text-align: center;
}

dialog:not(.bottom-sheet)[open],
input.dialog-trigger:checked+.dialog:not(.bottom-sheet) {
  animation: dialog-in var(--curve-decel) 0.5s, opacity var(--curve-decel) 0.1s both;
}

:is(dialog, .dialog).bottom-sheet {
  top: 100%;
  transform: translate(-50%, -100%);
  background: var(--surface-container-low);
  color: var(--on-surface);
  border-radius: var(--bottom-sheet-shape) var(--bottom-sheet-shape) 0 0;
  padding: 2rem 1rem 1rem;
  border: none;
}

dialog[open].bottom-sheet,
input.dialog-trigger:checked+.dialog.bottom-sheet {
  animation: dialog-bottom var(--curve-decel) 0.5s;
}

input.dialog-trigger:checked::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

dialog::backdrop,
input.dialog-trigger:checked::after {
  --backdrop-opacity: 30%;
  background: rgb(from var(--scrim) r g b / var(--backdrop-opacity));
  animation: dialog-backdrop 0.4s;
}

dialog.bottom-sheet::backdrop,
input.dialog-trigger:has(+ .dialog.bottom-sheet):checked::after {
  --backdrop-opacity: 50%;
}

:is(dialog, .dialog) form {
  text-align: right;
  padding-top: 0.5rem;
}

:is(dialog, .dialog).bottom-sheet form {
  padding-top: 1.5rem;
}

@keyframes dialog-bottom {
  0% {
    transform: translate(-50%, 50%);
  }

  100% {
    transform: translate(-50%, -100%);
  }
}

@keyframes dialog-backdrop {
  0% {
    background-color: transparent;
  }

  100% {
    background: rgb(from var(--scrim) r g b / var(--backdrop-opacity));
  }
}

@keyframes dialog-in {
  0% {
    transform: translate(-50%, -70%);
    clip-path: inset(0 0 100% 0 round var(--rounding-extra-large));
  }

  100% {
    transform: translate(-50%, -50%);
    clip-path: inset(0 0 0 0 round var(--rounding-extra-large));
  }
}

.field {
  position: relative;
}

.field:not(:last-child, :is(nav, .row) .field, .grid>.field) {
  margin-bottom: 1rem;
}

.field :is(input, textarea) {
  display: block !important;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: var(--on-surface);
  box-sizing: border-box;
  font: inherit;
  padding: 1rem;
  resize: vertical;
}

.field:not(.outline) :is(input, textarea) {
  border-bottom: 1px solid var(--outline);
  background: var(--surface-container-highest);
  border-radius: var(--textfield-filled-shape) var(--textfield-filled-shape) 0 0;
  padding: 1.5rem 1rem 0.5rem;
}

.field:not(.outline) :is(input, textarea):hover {
  background: rgb(from var(--on-surface) r g b / 15%);
}

.field.outline :is(input, textarea) {
  border: 1px solid var(--outline);
  border-radius: var(--textfield-outlined-shape);
}

.field:not(.outline) :is(input, textarea):focus {
  outline: none;
  border-bottom: 2px solid var(--primary);
  margin-bottom: -1px;
}

.field.outline :is(input, textarea):focus {
  border: 2px solid var(--primary);
  margin: -1px;
}

.field :is(input, textarea)::-moz-placeholder {
  color: transparent;
  -moz-user-select: none;
       user-select: none;
}

.field :is(input, textarea)::placeholder {
  color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.field label {
  position: absolute;
  top: 1rem;
  bottom: 0;
  left: 1rem;
  display: flex;
  align-items: self-start;
  pointer-events: none;
}

.field label span {
  transition: all 0.4s var(--curve-decel);
}

.field.outline label {
  margin-left: -.35rem;
}

.field.outline label span {
  padding: 0 .35rem;
  background: var(--background);
}

.field:not(.outline) :is(input, textarea):is(:focus, :not(:-moz-placeholder)) + label span {
  font-size: 0.75rem;
  transform: translate(0, -50%);
}

.field:not(.outline) :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label span {
  font-size: 0.75rem;
  transform: translate(0, -50%);
}

.field.outline :is(input, textarea):is(:focus, :not(:-moz-placeholder)) + label span {
  font-size: 0.75rem;
  transform: translate(0, -115%);
}

.field.outline :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label span {
  font-size: 0.75rem;
  transform: translate(0, -115%);
}

.field :is(input, textarea):focus + label span {
  color: var(--primary);
}

.field:has(iconify-icon) :is(input, textarea) {
  padding-left: 2.85rem !important;
}

.field:has(iconify-icon) label {
  left: 2.85rem;
}

.field.outline:has(iconify-icon) :is(input, textarea):is(:focus, :not(:-moz-placeholder)) + label {
  left: 1rem;
}

.field.outline:has(iconify-icon) :is(input, textarea):is(:focus, :not(:placeholder-shown)) + label {
  left: 1rem;
}

.field iconify-icon {
  position: absolute;
  pointer-events: none;
  left: 0.65rem;
  font-size: 1.5rem;
}

:is(.checkbox, .radio) {
  display: inline-block;
  position: relative;
  cursor: pointer;
  z-index: 0;
}

:is(.checkbox, .radio):not(:last-child) {
  margin-right: 0.75rem;
}

:is(.checkbox, .radio)>input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  z-index: -1;
  position: absolute;
  left: -10px;
  top: -8px;
  display: block;
  margin: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  box-shadow: none;
  outline: none;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: all var(--curve-decel) 0.35s;
}

:is(.checkbox, .radio):hover>input {
  opacity: 0.08;
}

:is(.checkbox, .radio)>span::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  border: solid 2px;
  border-color: currentColor;
  border-radius: var(--checkbox-shape);
  transition: all 0.2s;
}

.checkbox>span::before {
  margin: 3px 11px 3px 1px;
  width: 18px;
  height: 18px;
}

.checkbox>input:checked+span::before {
  border-color: var(--primary);
  background-color: var(--primary);
}

.radio>span::before {
  margin: 2px 10px 2px 0;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

:is(.checkbox, .radio)>span::after {
  content: "";
  display: block;
  position: absolute;
}

.checkbox>span::after {
  top: 4px;
  left: 1px;
  width: 10px;
  height: 5px;
  border: solid 1px transparent;
  border-right: none;
  border-top: none;
  transform: translate(3px, 4px) rotate(-45deg);
}

.radio>span::after {
  top: 2px;
  left: 0;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  transform: translate(5px, 5px) scale(0);
  transition: transform var(--easing-fast-spatial);
}

.radio>input:checked+span::after {
  transform: translate(5px, 5px) scale(1);
}

:is(.checkbox, .radio)>input:checked {
  background-color: var(--primary);
}

:is(.checkbox, .radio)>input:checked+span::after {
  border-color: var(--on-primary);
}

:is(.checkbox, .radio)>input:active+span::before,
.radio>input:checked+span::before {
  border-color: var(--primary);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.grid>* {
  margin: 0;
  grid-column: span var(--num);
}

.grid>.s1,
.grid.all-s1>* {
  --num: 1;
}

.grid>.s2,
.grid.all-s2>* {
  --num: 2;
}

.grid>.s3,
.grid.all-s3>* {
  --num: 3;
}

.grid>.s4,
.grid.all-s4>* {
  --num: 4;
}

.grid>.s5,
.grid.all-s5>* {
  --num: 5;
}

.grid>.s6,
.grid.all-s6>* {
  --num: 6;
}

.grid>.s7,
.grid.all-s7>* {
  --num: 7;
}

.grid>.s8,
.grid.all-s8>* {
  --num: 8;
}

.grid>.s9,
.grid.all-s9>* {
  --num: 9;
}

.grid>.s10,
.grid.all-s10>* {
  --num: 10;
}

.grid>.s11,
.grid.all-s11>* {
  --num: 11;
}

.grid>.s12,
.grid.all-s12>* {
  --num: 12;
}

@media screen and (min-width: 48em) {

  .grid>.m1,
  .grid.all-m1>* {
    --num: 1;
  }

  .grid>.m2,
  .grid.all-m2>* {
    --num: 2;
  }

  .grid>.m3,
  .grid.all-m3>* {
    --num: 3;
  }

  .grid>.m4,
  .grid.all-m4>* {
    --num: 4;
  }

  .grid>.m5,
  .grid.all-m5>* {
    --num: 5;
  }

  .grid>.m6,
  .grid.all-m6>* {
    --num: 6;
  }

  .grid>.m7,
  .grid.all-m7>* {
    --num: 7;
  }

  .grid>.m8,
  .grid.all-m8>* {
    --num: 8;
  }

  .grid>.m9,
  .grid.all-m9>* {
    --num: 9;
  }

  .grid>.m10,
  .grid.all-m10>* {
    --num: 10;
  }

  .grid>.m11,
  .grid.all-m11>* {
    --num: 11;
  }

  .grid>.m12,
  .grid.all-m12>* {
    --num: 12;
  }
}

@media screen and (min-width: 64em) {

  .grid>.l1,
  .grid.all-l1>* {
    --num: 1;
  }

  .grid>.l2,
  .grid.all-l2>* {
    --num: 2;
  }

  .grid>.l3,
  .grid.all-l3>* {
    --num: 3;
  }

  .grid>.l4,
  .grid.all-l4>* {
    --num: 4;
  }

  .grid>.l5,
  .grid.all-l5>* {
    --num: 5;
  }

  .grid>.l6,
  .grid.all-l6>* {
    --num: 6;
  }

  .grid>.l7,
  .grid.all-l7>* {
    --num: 7;
  }

  .grid>.l8,
  .grid.all-l8>* {
    --num: 8;
  }

  .grid>.l9,
  .grid.all-l9>* {
    --num: 9;
  }

  .grid>.l10,
  .grid.all-l10>* {
    --num: 10;
  }

  .grid>.l11,
  .grid.all-l11>* {
    --num: 11;
  }

  .grid>.l12,
  .grid.all-l12>* {
    --num: 12;
  }
}

.grid-outline {
  border-bottom: 1px solid var(--outline-variant);
  border-left: 1px solid var(--outline-variant);
  gap: 0;
}

.grid-outline>* {
  border-top: 1px solid var(--outline-variant);
  border-right: 1px solid var(--outline-variant);
}

details .menu {
  position: absolute;
  z-index: 2;
}

.list-box,
.menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.list-box>* {
  padding: 1.15rem 1rem 0.75rem;
}

.list-box>*>article * {
  margin: 0;
}

.list-box>* iconify-icon,
.menu>* iconify-icon {
  font-size: 1.5rem;
  margin-right: 1rem;
}

.list-box>*+* {
  border-top: 1px solid var(--outline-variant);
}

.menu {
  background: var(--surface-container);
  box-shadow: var(--elevation-2);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--menu-shape);
  padding: 0.5rem 0;
  min-width: 7rem;
  max-width: 17.5rem;
}

.menu>* {
  padding: 0.75rem;
  cursor: pointer;
  transition: 0.1s;
}

main>aside {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  padding: 0 1.25rem;
}

main>aside> :is(menu, .row) {
  display: flex;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  margin: 0;
}

main>article {
  width: 93%;
  margin: 0 0 0 auto;
  padding: 0 1.5rem;
}

@media screen and (max-width: 64em) {
  main>aside {
    background: var(--surface);
    top: auto;
    bottom: 0;
    padding: 0.25rem 0;
    width: 100%;
    z-index: 50;
    height: -moz-min-content;
    height: min-content;
  }

  main>aside> :is(menu, .row) {
    justify-content: space-around;
    flex-direction: row;
  }

  main {
    padding: 0 1rem;
    margin: 0 auto 2rem;
  }

  main>article {
    width: 100%;
    padding: 0 0 !important;
    margin-bottom: 2.25rem;
  }

  :is(dialog, .dialog) {
    min-width: 100% !important;
    width: 100%;
  }
}

:is(nav, .row):not(.segmented),
.list-box>*,
.menu>*,
label.checkbox *,
label.radio *,
.field:has(iconify-icon) {
  display: flex;
  align-items: center;
  align-self: normal;
  text-align: start;
}

:is(nav, .row) *:not(main>aside *, :is(h1, h2, h3, h4, h5, h6)) {
  margin-bottom: 0;
  margin-top: 0;
}

main>aside li,
main>aside li:has(*>iconify-icon)>* {
  width: 3.5rem;
  margin: 0.2rem 0;
  cursor: pointer;
  display: flex;
  text-align: center;
  list-style-type: none;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  color: inherit;
}

main>aside li span {
  font-size: 0.75rem;
  font-weight: 500;
}

main>aside li iconify-icon {
  width: 100%;
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem;
  border-radius: var(--rounding-full);
  transition: 0.1s;
}

main>aside li.active iconify-icon {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

main>aside li iconify-icon {
  font-size: 1.5rem;
}

main>article>section {
  margin: 3.5rem 0;
}

main>aside * {
  align-self: center;
}

progress:not(.circle, [value])::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  background: var(--primary);
  animation: 1.2s to-linear linear infinite;
}

@keyframes to-linear {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

progress {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

progress:not(.circle) {
  position: relative;
  height: 0.25rem;
  border-radius: var(--linear-progress-shape);
  overflow: hidden;
}

::-webkit-progress-value {
  background: var(--primary);
}

::-webkit-progress-bar {
  background: var(--primary-container);
}

progress.circle::-webkit-progress-value {
  background: transparent;
}

progress.circle::-webkit-progress-bar {
  background: transparent;
}

progress.circle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 3rem;
  height: 3rem;
  background: conic-gradient(var(--primary) calc(var(--value) * 1%), var(--primary-container) 0);
  border-radius: 50%;
}

progress.circle::after {
  content: "";
  position: absolute;
  inset: 10%;
  background: var(--background);
  border-radius: 50%;
}

progress.circle.spin {
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.slider {
  display: block;
  position: relative;
  height: 2.75rem;
  min-width: 10rem;
}

.slider input {
  position: absolute;
  width: calc(100%);
  height: 100%;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin: 0;
  cursor: pointer;
}

.slider .track::before {
  position: absolute;
  content: " ";
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: calc(var(--percent) - 0.375rem);
  height: 1rem;
  pointer-events: none;
  background: var(--primary);
  border-start-start-radius: var(--slider-track-out-shape);
  border-end-start-radius: var(--slider-track-out-shape);
  border-start-end-radius: var(--slider-track-in-shape);
  border-end-end-radius: var(--slider-track-in-shape);
  transition: var(--easing);
}

.slider .track::after {
  position: absolute;
  content: " ";
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: calc(100% - var(--percent) - 0.375rem);
  height: 1rem;
  pointer-events: none;
  background: var(--primary-container);
  border-start-start-radius: var(--slider-track-in-shape);
  border-end-start-radius: var(--slider-track-in-shape);
  border-start-end-radius: var(--slider-track-out-shape);
  border-end-end-radius: var(--slider-track-out-shape);
  transition: var(--easing);
}

.slider .thumb {
  position: absolute;
  left: var(--percent);
  translate: -50% 0;
  width: 0.25rem;
  height: 2.75rem;
  border-radius: 1.25rem;
  background: var(--primary);
  pointer-events: none;
  transition: var(--easing);
}

.slider input:active~.thumb {
  width: 0.125rem;
}

.slider .thumb::before {
  content: attr(data-percent);
  position: absolute;
  background: var(--inverse-surface);
  color: var(--inverse-on-surface);
  width: 2.3rem;
  text-align: center;
  padding: 0.4rem 0;
  font-size: 0.875rem;
  border-radius: var(--slider-thumb-shape);
  left: -1.15rem;
  top: -2.65rem;
  opacity: 0;
  pointer-events: none;
  transition: var(--easing);
}

.slider:hover .thumb::before {
  opacity: 1;
}

.snackbar {
  visibility: hidden;
  top: 87.5%;
  padding: 0.25rem 1rem;
  min-width: 20rem;
  max-width: 60rem;
  border-radius: var(--snackbar-shape);
  box-shadow: var(--elevation-3);
  background-color: var(--inverse-surface);
  border: none;
  color: var(--inverse-on-surface);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 300;
  opacity: 0;
}

.snackbar:popover-open {
  animation: snackbar-open var(--curve-decel) 0.5s, opacity var(--curve-decel) 0.1s;
  visibility: visible;
  opacity: 1;
}

.snackbar :where(.btn, button).icon {
  margin-right: -1rem;
  border-radius: 0;
  color: var(--inverse-on-surface);
}

@media screen and (max-width: 64em) {
  .snackbar {
    top: 77.5%;
  }
}

@keyframes snackbar-open {
  0% {
    clip-path: polygon(-100% 150%, -100% calc(100% + 0.25rem), 0% calc(100% + 0.25rem), 0.033rem calc(100% + 0.125rem), 0.125rem calc(100% + 0.033rem), 0.25rem 100%, calc(100% - 0.25rem) 100%, calc(100% - 0.125rem) calc(100% + 0.033rem), calc(100% - 0.033rem) calc(100% + 0.125rem), 100% calc(100% + 0.25rem), 200% calc(100% + 0.25rem), 200% 150%);
  }

  to {
    clip-path: polygon(-100% 150%, -100% 0.25rem, 0% 0.25rem, 0.033rem 0.125rem, 0.125rem 0.033rem, 0.25rem 0%, calc(100% - 0.25rem) 0%, calc(100% - 0.125rem) 0.033rem, calc(100% - 0.033rem) 0.125rem, 100% 0.25rem, 200% 0.25rem, 200% 150%);
  }
}

.switch {
  position: relative;
  display: inline-flex;
  width: 3.25rem;
  height: 2rem;
}

.switch>span {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-container-highest);
  border: solid 0.125rem var(--outline);
  transition: 0.2s;
  border-radius: 2rem;
}

.switch>input+span::before {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border-radius: var(--switch-handle-shape);
  background-color: var(--outline);
  color: var(--on-primary, var(--on-primary-container));
  cursor: pointer;
  transition: var(--easing-fast-spatial);
  left: .4rem;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: var(--rounding-full);
  height: 3rem;
  margin: -.5rem 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-.5rem);
  transition: .1s;
  width: 3rem;
  z-index: 1
}

.switch:hover input {
  background: rgb(from var(--primary) r g b/10%)
}

.switch>input:checked {
  transform: translateX(.75rem)
}

.switch>input:checked+span {
  background: var(--primary);
  border-color: var(--primary);
}

.switch>input:hover+span:before {
  background: var(--on-surface-variant)
}

.switch>input:checked:hover+span:before {
  background: var(--primary-container)
}

.switch>input:checked+span::before {
  background-color: var(--on-primary);
  scale: 1.5;
  left: 1.65rem;
}

.switch:active>input+span::before {
  scale: 1.75;
}

.switch>input+span:after {
  border: solid transparent;
  border-width: 0 .1em .1em 0;
  content: "";
  display: block;
  height: .55rem;
  left: .7rem;
  position: absolute;
  top: .5rem;
  transform: translateX(0) rotate(45deg);
  transition: var(--easing-fast-spatial);
  width: .275rem
}

.switch>input:checked+span:after {
  border-color: var(--primary);
  transform: translateX(1.25rem) rotate(45deg)
}

.tabs {
  display: flex;
  border-bottom: 1px solid var(--outline-variant);
}

.tabs.variable {
  padding: 0 1rem;
}

.tabs.variable > * {
  width: -moz-max-content;
  width: max-content;
  padding: 0.65rem 1rem;
  height: 4rem;
}

.tabs > * {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0 0;
  height: 3rem;
  cursor: pointer;
  width: 100%;
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: 0.1s;
}

.tabs iconify-icon {
  display: flex !important;
  flex: 1 !important;
  flex-grow: 1 !important;
  font-size: 1.5rem;
}

.tabs > label:has(input:checked) {
  color: var(--primary);
}

.tabs > label::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  width: 3rem;
  margin: 0 auto;
  background: var(--primary);
  border-radius: .1875rem .1875rem 0 0;
  transition: height var(--easing-fast-spatial);
}

.tabs > label:has(input:checked)::after {
  height: .1875rem;
}

[class*=tooltipped] {
  position: relative;
}

[class*=tooltipped]:hover::after {
  visibility: visible;
  opacity: 1;
}

[class*=tooltipped]:focus {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

[class*=tooltipped]::after {
  --space: 0.35rem;
  content: attr(aria-label);
  background-color: var(--inverse-surface);
  color: var(--inverse-on-surface);
  text-align: left;
  position: absolute;
  visibility: hidden;
  padding: 0.4rem 0.6rem;
  border-radius: var(--rounding-extra-small);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  transition: all 0.3s var(--curve-decel);
  z-index: 1000;
  pointer-events: none;
}

[class*=tooltipped].rich::after {
  white-space: normal;
  width: 14rem;
  padding: 1rem 0.85rem;
  font-size: 0.875rem;
  border-radius: var(--rounding-small);
  box-shadow: var(--elevation-3);
}

.tooltipped::after {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  margin-bottom: var(--space);
}

.tooltipped-bottom::after {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  margin-top: var(--space);
}

.tooltipped-left::after {
  top: 50%;
  right: 100%;
  transform: translateY(-50%) scale(0.8);
  margin-right: var(--space);
}

.tooltipped-right::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%) scale(0.8);
  margin-left: var(--space);
}

.tooltipped:hover::after,
.tooltipped-bottom:hover::after,
.tooltipped:focus::after,
.tooltipped-bottom:focus::after {
  transform: translateX(-50%) scale(1);
}

.tooltipped-left:hover::after,
.tooltipped-right:hover::after,
.tooltipped-left:focus::after,
.tooltipped-right:focus::after {
  transform: translateY(-50%) scale(1);
}

:is(h1, h2, h3, h4, h5, h6),
[class^="display"] {
  display: block;
  font-weight: 400;
  margin: 0.75rem 0;
  line-height: normal;
}

h1 {
  font-size: 3.5625rem;
}

h2 {
  font-size: 2.8125rem;
}

h3 {
  font-size: 2.25rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.75rem;
}

h6 {
  font-size: 1.5rem;
}

h1.small {
  font-size: 3.0625rem;
}

h2.small {
  font-size: 2.3125rem;
}

h3.small {
  font-size: 1.75rem;
}

h4.small {
  font-size: 1.5rem;
}

h5.small {
  font-size: 1.25rem;
}

h6.small {
  font-size: 1rem;
}

h1.display,
.display-xxxl {
  font-size: 4.25rem;
}

h2.display,
.display-xxl,
.text-xxxl {
  font-size: 3.75rem;
}

h3.display,
.display-xl,
.text-xxl {
  font-size: 3rem;
}

h4.display,
.display-l,
.text-xl {
  font-size: 2.125rem;
}

h5.display,
.display-base,
.text-lg {
  font-size: 1.25rem;
}

h6.display,
.display-sm,
.text-base {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0.015625rem;
}

a:not(.btn, :has(*:not(span))) {
  color: inherit;
  background: linear-gradient(to top, var(--primary) 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0 7.5%;
  border-radius: var(--rounding-extra-small);
  background-repeat: no-repeat;
  transition: 0.25s;
  will-change: background-position;
}

a:not(.btn, :has(*:not(span))):hover {
  color: var(--on-primary);
  background-position: 0 100%;
}

code,
kbd {
  background: var(--surface-variant);
  font-size: 0.9rem;
  border-radius: 0.25rem;
  letter-spacing: 0;
  padding: 0 0.25rem;
}

kbd {
  border: 1px solid var(--outline);
  border-bottom: 3px solid var(--outline);
}

pre {
  letter-spacing: 0;
  overflow-x: auto;
}

hr {
  border: none;
  height: 0.025rem;
  background: var(--outline-variant);
}

blockquote {
  background: var(--surface-container-highest);
  border-radius: var(--rounding-medium);
  border-left: 0.25rem dotted var(--primary);
  margin: 0;
  padding: 0.75rem 1rem;
}

pre {
  background: var(--surface-container-highest);
  padding: 0.75rem;
  border-radius: var(--rounding-medium);
  margin: 0;
}

pre>code {
  padding: 0;
  font-size: 1rem;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table :is(th, td) {
  padding: 0.35rem;
  text-align: left;
}

table th:not(tfoot th) {
  border-bottom: 1px solid var(--outline);
}

table tfoot th {
  border-top: 1px solid var(--outline);
}

.primary {
  background: var(--primary) !important;
  color: var(--on-primary) !important;
}

.primary-container {
  background: var(--primary-container) !important;
  color: var(--on-primary-container) !important;
}

.secondary {
  background: var(--secondary) !important;
  color: var(--on-secondary) !important;
}

.secondary-container {
  background: var(--secondary-container) !important;
  color: var(--on-secondary-container) !important;
}

.tertiary {
  background: var(--tertiary) !important;
  color: var(--on-tertiary) !important;
}

::-moz-selection {
  background: var(--tertiary-container) !important;
  color: var(--on-tertiary-container) !important;
}

.tertiary-container,
::selection {
  background: var(--tertiary-container) !important;
  color: var(--on-tertiary-container) !important;
}

.background {
  background: var(--background) !important;
  color: var(--on-background) !important;
}

.surface {
  background: var(--surface) !important;
  color: var(--on-surface) !important;
}

.inverse-surface {
  background: var(--inverse-surface) !important;
  color: var(--inverse-on-surface) !important;
}

.surface-variant {
  background: var(--surface-variant) !important;
  color: var(--on-surface-variant) !important;
}

.error {
  background: var(--error) !important;
  color: var(--on-error) !important;
}

.error-container {
  background: var(--error-container) !important;
  color: var(--on-error-container) !important;
}

.accent-gradient {
  background-image: linear-gradient(to bottom, var(--primary-container), var(--tertiary-container)) !important;
  color: var(--on-primary-container) !important;
}

:where([class*=shadow]) {
  box-shadow: var(--shadow-size) !important;
  --shadow-size: var(--elevation-2);
}

.shadow-none {
  --shadow-size: 0;
}

.shadow-auto {
  --shadow-size: auto;
}

.shadow-s {
  --shadow-size: var(--elevation-1);
}

.shadow-l {
  --shadow-size: var(--elevation-3);
}

.shadow-xl {
  --shadow-size: var(--elevation-4);
}

.shadow-xxl {
  --shadow-size: var(--elevation-5);
}

:where([class*=margin]):not(.margin-left, .margin-right, .margin-top, .margin-bottom, .margin-horiz, .margin-vert) {
  margin: var(--margin-size) !important;
}

:where([class*=margin]) {
  --margin-size: 1rem;
}

.margin-none {
  --margin-size: 0;
}

.margin-auto {
  --margin-size: auto;
}

.margin-xs {
  --margin-size: 0.25rem;
}

.margin-s {
  --margin-size: 0.5rem;
}

.margin-l {
  --margin-size: 1.5rem;
}

.margin-xl {
  --margin-size: 2rem;
}

.margin-left,
.margin-horiz {
  margin-inline-start: var(--margin-size) !important;
}

.margin-right,
.margin-horiz {
  margin-inline-end: var(--margin-size) !important;
}

.margin-top,
.margin-vert {
  margin-block-start: var(--margin-size) !important;
}

.margin-bottom,
.margin-vert {
  margin-block-end: var(--margin-size) !important;
}

:where([class*=br]) {
  display: block;
}

:where([class*=padding]):not(.padding-left, .padding-right, .padding-top, .padding-bottom, .padding-horiz, .padding-vert),
:where([class*=br]) {
  padding: var(--padding-size) !important;
}

:where([class*=padding]) {
  --padding-size: 1rem;
}

.padding-none {
  --padding-size: 0;
}

.padding-auto {
  --padding-size: auto;
}

.padding-xs,
.br {
  --padding-size: 0.25rem;
}

.padding-s,
.br-l {
  --padding-size: 0.5rem;
}

.padding-l,
.br-xl {
  --padding-size: 1.5rem;
}

.padding-xl {
  --padding-size: 2rem;
}

.padding-left,
.padding-horiz {
  padding-inline-start: var(--padding-size) !important;
}

.padding-right,
.padding-horiz {
  padding-inline-end: var(--padding-size) !important;
}

.padding-top,
.padding-vert {
  padding-block-start: var(--padding-size) !important;
}

.padding-bottom,
.padding-vert {
  padding-block-end: var(--padding-size) !important;
}

:where([class*=gap]) {
  gap: var(--gap-size) !important;
  --gap-size: 1rem;
}

.gap-none {
  --gap-size: 0;
}

.gap-auto {
  --gap-size: auto;
}

.gap-xs {
  --gap-size: 0.25rem;
}

.gap-s {
  --gap-size: 0.5rem;
}

.gap-l {
  --gap-size: 1.5rem;
}

.gap-xl {
  --gap-size: 2rem;
}

:where([class*=round]) {
  border-radius: var(--round-size) !important;
  --round-size: var(--rounding-medium);
}

.round-none {
  --round-size: var(--rounding-none);
}

.round-xs {
  --round-size: var(--rounding-extra-small);
}

.round-s {
  --round-size: var(--rounding-small);
}

.round-l {
  --round-size: var(--rounding-large);
}

.round-xl {
  --round-size: var(--rounding-extra-large);
}

.round-full {
  --round-size: var(--rounding-full);
}

.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-col {
  flex-direction: column !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-max,
.all-max * {
  display: flex !important;
  flex: 1 !important;
  flex-grow: 1 !important;
}

:where([class*=align]) {
  align-content: var(--alignment) !important;
  align-items: var(--alignment) !important;
  align-self: var(--alignment) !important;
}

.align-start {
  --alignment: start;
}

.align-end {
  --alignment: end;
}

.align-center {
  --alignment: center;
}

.align-baseline {
  --alignment: baseline;
}

.align-stretch {
  --alignment: stretch;
}

:where([class*=justify]) {
  justify-content: var(--justification) !important;
  justify-items: var(--justification) !important;
  justify-self: var(--justification) !important;
}

.justify-left {
  --justification: left;
}

.justify-center {
  --justification: center;
}

.justify-right {
  --justification: right;
}

.justify-between {
  --justification: space-between;
}

.justify-around {
  --justification: space-around;
}

:where([class*=text]) {
  text-align: var(--text) !important;
}

.text-left {
  --text: left;
}

.text-center {
  --text: center;
}

.text-right {
  --text: right;
}

:where([class*=overflow]) {
  overflow: var(--overflow) !important;
}

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

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

.overflow-visible {
  --overflow: visible;
}

.overflow-scroll {
  --overflow: scroll;
}

:where([class*=width]) {
  width: var(--width) !important;
}

.width-min {
  --width: min-content;
}

.width-max {
  --width: max-content;
}

.width-fit {
  --width: fit-content;
}

.width-full {
  --width: 100%;
}

.scroll {
  overflow-x: auto !important;
}

.scroll-y {
  overflow-y: auto !important;
}