layout.css

:root {
  --spacing: 8px;
  --padding: 8px;
  --margin: 8px;
}

* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

p {
  margin: var(--margin) 0;
}

pre {
  overflow: auto;
}

.margin {
  margin: var(--margin);
}

.margin-top {
  margin-top: var(--margin);
}

.margin-right {
  margin-right: var(--margin);
}

.margin-bottom {
  margin-bottom: var(--margin);
}

.margin-left {
  margin-left: var(--margin);
}

.margin-horizontal {
  margin-left: var(--margin);
  margin-right: var(--margin);
}

.margin-vertical {
  margin-top: var(--margin);
  margin-bottom: var(--margin);
}

.padding {
  padding: var(--padding);
}

.padding-top {
  padding-top: var(--padding);
}

.padding-right {
  padding-right: var(--padding);
}

.padding-bottom {
  padding-bottom: var(--padding);
}

.padding-left {
  padding-left: var(--padding);
}

.padding-horizontal {
  padding-left: var(--padding);
  padding-right: var(--padding);
}

.padding-vertical {
  padding-top: var(--padding);
  padding-bottom: var(--padding);
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-row.gap,
.flex-column.gap {
  gap: var(--spacing);
}

.flex-row.align-start,
.flex-column.align-start {
  align-items: flex-start;
}

.flex-row.align-center,
.flex-column.align-center,
.grid.align-center {
  align-items: center;
}

.flex-row.align-end,
.flex-column.align-end {
  align-items: flex-end;
}

.flex-row.align-stretch,
.flex-column.align-stretch {
  align-items: stretch;
}

.flex-row.justify-start,
.flex-column.justify-start {
  justify-content: flex-start;
}

.flex-row.justify-center,
.flex-column.justify-center {
  justify-content: center;
}

.flex-row.justify-end,
.flex-column.justify-end {
  justify-content: flex-end;
}

.grow {
  flex-grow: 1;
}

.grid {
  display: grid;
}

.grid.gap {
  grid-column-gap: var(--spacing);
  grid-row-gap: var(--spacing);
}

.grid.gap-vertical {
  grid-row-gap: var(--spacing);
}

.grid.gap-horizontal {
  grid-column-gap: var(--spacing);
}

.checkbox-row, .radio-row {
  display: flex;
  align-items: center;
}

.checkbox-row label, .radio-row label {
  padding-left: var(--spacing);
}

.window {
  display: flex;
  flex-direction: column;
}

.title-bar {
  flex-shrink: 0;
}

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

.window-body {
  flex-grow: 1;
}

[role=menu],
[role=menubar] {
  user-select: none;
  list-style-type: none;
  display: flex;
  white-space: nowrap;
}

[role=menu] {
  flex-direction: column;
}

[role=menu] li,
[role=menubar] li {
  position: relative;
  text-overflow: ellipsis;
  cursor: default;
}

[role=menu] li > ul,
[role=menu] li > .menu,
[role=menubar] li > ul,
[role=menubar] li > .menu {
  position: absolute;
  z-index: 1;
  display: none;
}

[role=menu] li:focus-within > ul,
[role=menu] li:focus-within > .menu,
[role=menubar] li:focus-within > ul,
[role=menubar] li:focus-within > .menu {
  display: block;
}

.list [role="option"] {
  user-select: none;
}