[width="100%"] {
  width: 100%;
}

[stretch],
[stretch="true"] {
  width: 100%;
}

/* Horizontal Stack */

[layout="h-stack"],
[layout="row"] {
  display: flex;
}

[h-stack="spread"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Horizontal Stack: Spacing */

[layout="h-stack"][gap="1"] > * + *,
[layout="row"][gap="1"] > * + * {
  margin-left: 1px;
}

[layout="h-stack"][gap="2"] > * + *,
[layout="row"][gap="2"] > * + * {
  margin-left: 2px;
}

[layout="h-stack"][gap="4"] > * + *,
[layout="row"][gap="4"] > * + * {
  margin-left: 4px;
}

[layout="h-stack"][gap="8"] > * + *,
[layout="row"][gap="8"] > * + * {
  margin-left: 8px;
}

[layout="h-stack"][gap="16"] > * + *,
[layout="row"][gap="16"] > * + * {
  margin-left: 16px;
}

[layout="h-stack"][gap="20"] > * + *,
[layout="row"][gap="20"] > * + * {
  margin-left: 20px;
}

[layout="h-stack"][gap="24"] > * + *,
[layout="row"][gap="24"] > * + * {
  margin-left: 24px;
}

[layout="h-stack"][gap="32"] > * + *,
[layout="row"][gap="32"] > * + * {
  margin-left: 32px;
}

/* Horizontal Stack: Alignment */

[layout="h-stack"][vertical-align="center"] {
  align-items: center;
}

[layout="h-stack"][vertical-align="top"] {
  align-items: flex-start;
}

[layout="h-stack"][vertical-align="bottom"] {
  align-items: flex-end;
}

[layout="row"][vertical-align="center"] {
  align-items: center;
}

[layout="row"][vertical-align="top"] {
  align-items: flex-start;
}

[layout="row"][vertical-align="bottom"] {
  align-items: flex-end;
}

/* Hortizontal Stack: Justification */

[justify="space-between"] {
  justify-content: space-between;
  width: 100%;
}

[spread],
[justify="spread"],
[justify-content="space-between"] {
  justify-content: space-between;
  width: 100%;
}

[justify="center"],
[justify-content="center"] {
  justify-content: center;
  width: 100%;
}

/* Vertical Stack */

[layout="v-stack"] {
  display: flex;
  flex-direction: column;
}

[layout="v-stack"][gap="1"] > * + * {
  margin-top: 1px;
}

[layout="v-stack"][gap="2"] > * + * {
  margin-top: 2px;
}

[layout="v-stack"][gap="4"] > * + * {
  margin-top: 4px;
}

[layout="v-stack"][gap="8"] > * + * {
  margin-top: 8px;
}

[layout="v-stack"][gap="16"] > * + * {
  margin-top: 16px;
}

[layout="v-stack"][gap="20"] > * + * {
  margin-top: 20px;
}

[layout="v-stack"][gap="24"] > * + * {
  margin-top: 24px;
}

[layout="v-stack"][gap="32"] > * + * {
  margin-top: 32px;
}

/* Layout: Grid */

[layout="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, 22px);
  align-items: start;
  justify-content: start;
}

[layout="grid"][gap="4"] {
  grid-gap: 4px;
}

[layout="grid"][gap="8"] {
  grid-gap: 8px;
}

[layout="grid"][gap="16"] {
  grid-gap: 16px;
}

[layout="grid"][gap="24"] {
  grid-gap: 24px;
}

[layout="grid"][gap="32"] {
  grid-gap: 32px;
}

[layout="grid"][gap="40"] {
  grid-gap: 40px;
}

/* Other Layouts */

[layout="center"] {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Navigation Bar */
[layout="navigation-bar"] {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  grid-gap: 8px;
  align-items: center;
  place-items: center;
}

[scroll] {
  overflow: scroll;
}

[layout="solo"] {
  display: grid;
  grid-template-columns: 1fr;
}

[layout="duo"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

[layout="trio"] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

[layout="quartett"] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

[layout="1-2"] {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

[layout="1-3"] {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

[align-items="center"] {
  align-items: center;
}

[position="sticky"] {
  position: sticky;
  top: 0;
  z-index: 1;
}

[layout="form-grid"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

[flex] {
  flex: 1;
}