:root {
  color-scheme: light dark;

  --block-bg: color-mix(in srgb, currentColor 4%, transparent);
  --block-outline: color-mix(in srgb, currentColor 50%, transparent);
  --block-outline-selected: ActiveText;
  --block-border-radius: 4px;
  --block-gap: 0.5rem;
  --block-padding: 0.5rem;
  --inline-gap: 0.5rem;
  --body-font-size: 12px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  font-size: var(--body-font-size);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

dialog:open {
  margin: auto;
  max-width: calc(100% - 2rem);
  max-height: calc(100% - 2rem);
}

div,
v-rows,
v-cols {
  display: flex;
  flex-direction: column;

  align-content: start;
  gap: var(--block-gap);
  padding: var(--block-padding);
  background-color: var(--block-bg);
}

span {
  display: flex;
  gap: var(--inline-gap);
}

v-cols {
  flex-direction: row;
}

v-icon {
  display: contents;
}

/** selectable */
h1,
h2,
h3,
h4,
h5,
h6,
svg,
p,
img,
span,
v-rows,
v-cols,
body,
div {
  border-radius: var(--block-border-radius);
  outline-offset: -1px;

  &[data-selected],
  &:hover {
    outline: 1px solid var(--block-outline);
  }
  &:not([data-selected]):has(*:hover) {
    outline: none;
  }
  &[data-selected] {
    outline-color: var(--block-outline-selected);
  }
}

/** layout */
[spread] {
  justify-content: space-between;
}

[wrap] {
  flex-wrap: wrap;
  flex-direction: row;
}

[hug] {
  align-self: start;
}
[hug="start"] {
  align-self: start;
}
[hug="center"] {
  align-self: center;
}
[hug="end"] {
  align-self: end;
}

[fill] {
  flex-grow: 1;
  min-height: 0;
  min-width: 0;
}
[fill="1"] {
  flex-grow: 1;
}
[fill="2"] {
  flex-grow: 2;
}
[fill="3"] {
  flex-grow: 3;
}
[fill="4"] {
  flex-grow: 4;
}
[scroll] {
  overflow: auto;
  min-height: 0;
  min-width: 0;
}

[max] {
  width: 100%;
  height: 100%;
}