term.css

/* VARIABLES
 * ====================
 * Setting up some variables used throughout the styles:
 * - All the colors. These come from Sonokai because it's awesome.
 * - Font size, line height, row width. The Grid.
 */

html {
  --bg1: #33353f;
  --bg2: #363944;
  --diff-yellow: #4e432f;
  --grey-dim: #595f6f;
  --purple: #b39df3;
  --yellow: #e7c664;
  --inherit: inherit;
  --bg0: #2c2e34;
  --bg4: #414550;
  --bg-blue: #85d3f2;
  --bg-red: #ff6077;
  --black: #181819;
  --diff-red: #55393d;
  --fg: #e2e2e3;
  --orange: #f39660;
  --bg3: #3b3e48;
  --diff-green: #394634;
  --grey: #7f8490;
  --red: #fc5d7c;
  --bg-dim: #222327;
  --bg-green: #a7df78;
  --blue: #76cce0;
  --diff-blue: #354157;
  --green: #9ed072;
  --transparent: transparent;
}

html {
  --base-size: 12px;
  --col: calc(1rem * 0.6007142857);
  --row: calc(1rem * 1.45);
}

html {
  font-size: var(--base-size);
  line-height: var(--row);
}

/* FOUNDATION
 * ====================
 * Some default properties that allow us to apply the theme and guarantee grid alignment.
 * - The list elements are a bit opinionated.
 * - We _need_ `content-box` to enforce the grid when applying widths and heights to items with borders
 */

*, *::before, *::after {
  padding: 0;
  margin: 0;
  border: 0;
  font-size: inherit;
  color: inherit;
  background-color: unset;
  font-family: inherit;
  box-sizing: content-box;
  text-decoration: none;
}

body {
  font-family: "Monaco Nerd Font";
  background-color: var(--bg-dim);
  color: var(--fg);
}

ul {
  list-style: none;
  padding-left: calc(var(--col) * 2);
  margin: 0;
}

ul>li {
  position: relative;
}

ul>li:before {
  content: "*";
  position: absolute;
  left: calc(var(--col) * -2);
  color: var(--grey);
}

ol {
  padding-left: calc(var(--col) * 3);
  margin: 0;
}

ol>li::marker {
  color: var(--grey);
}

/* TYPOGRAPHY
 * ====================
 * Basic text transofrmations: weight, style, whitespace, case.
 * Size is also an option. It's definitely cheating a bit, since terminals don't have that luxury,
 * but it's nice to have and is still guaranteed to be aligned.
 */

.text-1 {
  font-size: calc(var(--base-size) * 1);
  line-height: calc(var(--row) * 1);
}

.text-2 {
  font-size: calc(var(--base-size) * 2);
  line-height: calc(var(--row) * 2);
}

.text-3 {
  font-size: calc(var(--base-size) * 3);
  line-height: calc(var(--row) * 3);
}

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

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

.font-normal {
  font-weight: normal;
}

.font-bold {
  font-weight: bold;
}

.uppercase {
  text-transform: uppercase;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

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

.italic {
  font-style: italic;
}

.not-italic {
  font-style: normal;
}

/* COLORS
 * ====================
 * Utilities to apply the theme colors to text and background.
 */

.text-bg1 {
  color: var(--bg1);
}

.bg-bg1 {
  background-color: var(--bg1);
}

.text-bg2 {
  color: var(--bg2);
}

.bg-bg2 {
  background-color: var(--bg2);
}

.text-diff-yellow {
  color: var(--diff-yellow);
}

.bg-diff-yellow {
  background-color: var(--diff-yellow);
}

.text-grey-dim {
  color: var(--grey-dim);
}

.bg-grey-dim {
  background-color: var(--grey-dim);
}

.text-purple {
  color: var(--purple);
}

.bg-purple {
  background-color: var(--purple);
}

.text-yellow {
  color: var(--yellow);
}

.bg-yellow {
  background-color: var(--yellow);
}

.text-inherit {
  color: var(--inherit);
}

.bg-inherit {
  background-color: var(--inherit);
}

.text-bg0 {
  color: var(--bg0);
}

.bg-bg0 {
  background-color: var(--bg0);
}

.text-bg4 {
  color: var(--bg4);
}

.bg-bg4 {
  background-color: var(--bg4);
}

.text-bg-blue {
  color: var(--bg-blue);
}

.bg-bg-blue {
  background-color: var(--bg-blue);
}

.text-bg-red {
  color: var(--bg-red);
}

.bg-bg-red {
  background-color: var(--bg-red);
}

.text-black {
  color: var(--black);
}

.bg-black {
  background-color: var(--black);
}

.text-diff-red {
  color: var(--diff-red);
}

.bg-diff-red {
  background-color: var(--diff-red);
}

.text-fg {
  color: var(--fg);
}

.bg-fg {
  background-color: var(--fg);
}

.text-orange {
  color: var(--orange);
}

.bg-orange {
  background-color: var(--orange);
}

.text-bg3 {
  color: var(--bg3);
}

.bg-bg3 {
  background-color: var(--bg3);
}

.text-diff-green {
  color: var(--diff-green);
}

.bg-diff-green {
  background-color: var(--diff-green);
}

.text-grey {
  color: var(--grey);
}

.bg-grey {
  background-color: var(--grey);
}

.text-red {
  color: var(--red);
}

.bg-red {
  background-color: var(--red);
}

.text-bg-dim {
  color: var(--bg-dim);
}

.bg-bg-dim {
  background-color: var(--bg-dim);
}

.text-bg-green {
  color: var(--bg-green);
}

.bg-bg-green {
  background-color: var(--bg-green);
}

.text-blue {
  color: var(--blue);
}

.bg-blue {
  background-color: var(--blue);
}

.text-diff-blue {
  color: var(--diff-blue);
}

.bg-diff-blue {
  background-color: var(--diff-blue);
}

.text-green {
  color: var(--green);
}

.bg-green {
  background-color: var(--green);
}

.text-transparent {
  color: var(--transparent);
}

.bg-transparent {
  background-color: var(--transparent);
}

/* FLEX
 * ====================
 * Flex-related utilities. Still WIP.
 * Note that some things like `justify-between will not be available unless they can be guaranteed to _always_ respect the grid.
 */

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

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

.grow {
  flex-grow: 1;
}

.shrink {
  flex-shrink: 1;
}

.gap-0 {
  row-gap: calc(var(--row) * 0);
  column-gap: calc(var(--col) * 0);
}

.gap-1 {
  row-gap: calc(var(--row) * 1);
  column-gap: calc(var(--col) * 1);
}

.gap-2 {
  row-gap: calc(var(--row) * 2);
  column-gap: calc(var(--col) * 2);
}

.gap-4 {
  row-gap: calc(var(--row) * 4);
  column-gap: calc(var(--col) * 4);
}

.gap-x-0 {
  column-gap: calc(var(--col) * 0);
}

.gap-y-0 {
  row-gap: calc(var(--row) * 0);
}

.gap-x-1 {
  column-gap: calc(var(--col) * 1);
}

.gap-y-1 {
  row-gap: calc(var(--row) * 1);
}

.gap-x-2 {
  column-gap: calc(var(--col) * 2);
}

.gap-y-2 {
  row-gap: calc(var(--row) * 2);
}

.gap-x-4 {
  column-gap: calc(var(--col) * 4);
}

.gap-y-4 {
  row-gap: calc(var(--row) * 4);
}

/* MARGIN & PADDING
 * ====================
 * Applying margin and padding -- specific sides, x and y, all sides.
 * All the sizes are grid-aligned.
 * Margins are also negative.
 */

.-p-0 {
  padding-top: calc(var(--row) * 0);
  padding-bottom: calc(var(--row) * 0);
  padding-left: calc(var(--col) * 0);
  padding-right: calc(var(--col) * 0);
}

.p-1 {
  padding-top: calc(var(--row) * 1);
  padding-bottom: calc(var(--row) * 1);
  padding-left: calc(var(--col) * 1);
  padding-right: calc(var(--col) * 1);
}

.p-2 {
  padding-top: calc(var(--row) * 2);
  padding-bottom: calc(var(--row) * 2);
  padding-left: calc(var(--col) * 2);
  padding-right: calc(var(--col) * 2);
}

.p-4 {
  padding-top: calc(var(--row) * 4);
  padding-bottom: calc(var(--row) * 4);
  padding-left: calc(var(--col) * 4);
  padding-right: calc(var(--col) * 4);
}

.-px-0 {
  padding-left: calc(var(--col) * 0);
  padding-right: calc(var(--col) * 0);
}

.px-1 {
  padding-left: calc(var(--col) * 1);
  padding-right: calc(var(--col) * 1);
}

.px-2 {
  padding-left: calc(var(--col) * 2);
  padding-right: calc(var(--col) * 2);
}

.px-4 {
  padding-left: calc(var(--col) * 4);
  padding-right: calc(var(--col) * 4);
}

.-pl-0 {
  padding-left: calc(var(--col) * 0);
}

.pl-1 {
  padding-left: calc(var(--col) * 1);
}

.pl-2 {
  padding-left: calc(var(--col) * 2);
}

.pl-4 {
  padding-left: calc(var(--col) * 4);
}

.-pr-0 {
  padding-right: calc(var(--col) * 0);
}

.pr-1 {
  padding-right: calc(var(--col) * 1);
}

.pr-2 {
  padding-right: calc(var(--col) * 2);
}

.pr-4 {
  padding-right: calc(var(--col) * 4);
}

.-py-0 {
  padding-top: calc(var(--row) * 0);
  padding-bottom: calc(var(--row) * 0);
}

.py-1 {
  padding-top: calc(var(--row) * 1);
  padding-bottom: calc(var(--row) * 1);
}

.py-2 {
  padding-top: calc(var(--row) * 2);
  padding-bottom: calc(var(--row) * 2);
}

.py-4 {
  padding-top: calc(var(--row) * 4);
  padding-bottom: calc(var(--row) * 4);
}

.-pt-0 {
  padding-top: calc(var(--row) * 0);
}

.pt-1 {
  padding-top: calc(var(--row) * 1);
}

.pt-2 {
  padding-top: calc(var(--row) * 2);
}

.pt-4 {
  padding-top: calc(var(--row) * 4);
}

.-pb-0 {
  padding-bottom: calc(var(--row) * 0);
}

.pb-1 {
  padding-bottom: calc(var(--row) * 1);
}

.pb-2 {
  padding-bottom: calc(var(--row) * 2);
}

.pb-4 {
  padding-bottom: calc(var(--row) * 4);
}

.-m-2 {
  margin-top: calc(var(--row) * -2);
  margin-bottom: calc(var(--row) * -2);
  margin-left: calc(var(--col) * -2);
  margin-right: calc(var(--col) * -2);
}

.-m-1 {
  margin-top: calc(var(--row) * -1);
  margin-bottom: calc(var(--row) * -1);
  margin-left: calc(var(--col) * -1);
  margin-right: calc(var(--col) * -1);
}

.-m-0 {
  margin-top: calc(var(--row) * 0);
  margin-bottom: calc(var(--row) * 0);
  margin-left: calc(var(--col) * 0);
  margin-right: calc(var(--col) * 0);
}

.m-1 {
  margin-top: calc(var(--row) * 1);
  margin-bottom: calc(var(--row) * 1);
  margin-left: calc(var(--col) * 1);
  margin-right: calc(var(--col) * 1);
}

.m-2 {
  margin-top: calc(var(--row) * 2);
  margin-bottom: calc(var(--row) * 2);
  margin-left: calc(var(--col) * 2);
  margin-right: calc(var(--col) * 2);
}

.m-4 {
  margin-top: calc(var(--row) * 4);
  margin-bottom: calc(var(--row) * 4);
  margin-left: calc(var(--col) * 4);
  margin-right: calc(var(--col) * 4);
}

.-mx-2 {
  margin-left: calc(var(--col) * -2);
  margin-right: calc(var(--col) * -2);
}

.-mx-1 {
  margin-left: calc(var(--col) * -1);
  margin-right: calc(var(--col) * -1);
}

.-mx-0 {
  margin-left: calc(var(--col) * 0);
  margin-right: calc(var(--col) * 0);
}

.mx-1 {
  margin-left: calc(var(--col) * 1);
  margin-right: calc(var(--col) * 1);
}

.mx-2 {
  margin-left: calc(var(--col) * 2);
  margin-right: calc(var(--col) * 2);
}

.mx-4 {
  margin-left: calc(var(--col) * 4);
  margin-right: calc(var(--col) * 4);
}

.-ml-2 {
  margin-left: calc(var(--col) * -2);
}

.-ml-1 {
  margin-left: calc(var(--col) * -1);
}

.-ml-0 {
  margin-left: calc(var(--col) * 0);
}

.ml-1 {
  margin-left: calc(var(--col) * 1);
}

.ml-2 {
  margin-left: calc(var(--col) * 2);
}

.ml-4 {
  margin-left: calc(var(--col) * 4);
}

.-mr-2 {
  margin-right: calc(var(--col) * -2);
}

.-mr-1 {
  margin-right: calc(var(--col) * -1);
}

.-mr-0 {
  margin-right: calc(var(--col) * 0);
}

.mr-1 {
  margin-right: calc(var(--col) * 1);
}

.mr-2 {
  margin-right: calc(var(--col) * 2);
}

.mr-4 {
  margin-right: calc(var(--col) * 4);
}

.-my-2 {
  margin-top: calc(var(--row) * -2);
  margin-bottom: calc(var(--row) * -2);
}

.-my-1 {
  margin-top: calc(var(--row) * -1);
  margin-bottom: calc(var(--row) * -1);
}

.-my-0 {
  margin-top: calc(var(--row) * 0);
  margin-bottom: calc(var(--row) * 0);
}

.my-1 {
  margin-top: calc(var(--row) * 1);
  margin-bottom: calc(var(--row) * 1);
}

.my-2 {
  margin-top: calc(var(--row) * 2);
  margin-bottom: calc(var(--row) * 2);
}

.my-4 {
  margin-top: calc(var(--row) * 4);
  margin-bottom: calc(var(--row) * 4);
}

.-mt-2 {
  margin-top: calc(var(--row) * -2);
}

.-mt-1 {
  margin-top: calc(var(--row) * -1);
}

.-mt-0 {
  margin-top: calc(var(--row) * 0);
}

.mt-1 {
  margin-top: calc(var(--row) * 1);
}

.mt-2 {
  margin-top: calc(var(--row) * 2);
}

.mt-4 {
  margin-top: calc(var(--row) * 4);
}

.-mb-2 {
  margin-bottom: calc(var(--row) * -2);
}

.-mb-1 {
  margin-bottom: calc(var(--row) * -1);
}

.-mb-0 {
  margin-bottom: calc(var(--row) * 0);
}

.mb-1 {
  margin-bottom: calc(var(--row) * 1);
}

.mb-2 {
  margin-bottom: calc(var(--row) * 2);
}

.mb-4 {
  margin-bottom: calc(var(--row) * 4);
}

/* MARGIN AUTO
 * ====================
 * This is incuded for the sake of creating decent page layouts.
 * It's fine to use this on the root element, but anywhere else
 * it might break the grid.
 */

.m-auto {
  margin: auto;
}

.mx-auto {
  margin-inline: auto;
}

.my-auto {
  margin-block: auto;
}

/* BORDERS
 * ====================
 * Applying borders -- specific sides, x and y, all sides.
 * Colors, style, and radius can be changed.
 * The border width cannot be chosen; it's just yes or no.
 * Borders are applied along with a specific combination of margin and padding so that
 * they take a full extra row/column and remain aligned grid.
 * These half-paddings are the reason we need `content-box`.
 * Borders are defined _after_ margins and paddings, meaning that a bordered item cannot have additional margin or padding.
 * This is, again, to enforce grid alignment at all times
 */

.border {
  border-top: 2px solid var(--grey-dim);
  border-bottom: 2px solid var(--grey-dim);
  border-left: 2px solid var(--grey-dim);
  border-right: 2px solid var(--grey-dim);
  margin-top: calc((var(--row) - 2px) / 2);
  margin-bottom: calc((var(--row) - 2px) / 2);
  margin-left: calc((var(--col) - 2px) / 2);
  margin-right: calc((var(--col) - 2px) / 2);
  padding-top: calc((var(--row) - 2px) / 2);
  padding-bottom: calc((var(--row) - 2px) / 2);
  padding-left: calc((var(--col) - 2px) / 2);
  padding-right: calc((var(--col) - 2px) / 2);
}

.border-0 {
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

.border-red {
  border-top-color: var(--red);
  border-bottom-color: var(--red);
  border-left-color: var(--red);
  border-right-color: var(--red);
}

.border-bg-dim {
  border-top-color: var(--bg-dim);
  border-bottom-color: var(--bg-dim);
  border-left-color: var(--bg-dim);
  border-right-color: var(--bg-dim);
}

.border-bg-green {
  border-top-color: var(--bg-green);
  border-bottom-color: var(--bg-green);
  border-left-color: var(--bg-green);
  border-right-color: var(--bg-green);
}

.border-blue {
  border-top-color: var(--blue);
  border-bottom-color: var(--blue);
  border-left-color: var(--blue);
  border-right-color: var(--blue);
}

.border-diff-blue {
  border-top-color: var(--diff-blue);
  border-bottom-color: var(--diff-blue);
  border-left-color: var(--diff-blue);
  border-right-color: var(--diff-blue);
}

.border-green {
  border-top-color: var(--green);
  border-bottom-color: var(--green);
  border-left-color: var(--green);
  border-right-color: var(--green);
}

.border-transparent {
  border-top-color: var(--transparent);
  border-bottom-color: var(--transparent);
  border-left-color: var(--transparent);
  border-right-color: var(--transparent);
}

.border-bg1 {
  border-top-color: var(--bg1);
  border-bottom-color: var(--bg1);
  border-left-color: var(--bg1);
  border-right-color: var(--bg1);
}

.border-bg2 {
  border-top-color: var(--bg2);
  border-bottom-color: var(--bg2);
  border-left-color: var(--bg2);
  border-right-color: var(--bg2);
}

.border-diff-yellow {
  border-top-color: var(--diff-yellow);
  border-bottom-color: var(--diff-yellow);
  border-left-color: var(--diff-yellow);
  border-right-color: var(--diff-yellow);
}

.border-grey-dim {
  border-top-color: var(--grey-dim);
  border-bottom-color: var(--grey-dim);
  border-left-color: var(--grey-dim);
  border-right-color: var(--grey-dim);
}

.border-purple {
  border-top-color: var(--purple);
  border-bottom-color: var(--purple);
  border-left-color: var(--purple);
  border-right-color: var(--purple);
}

.border-yellow {
  border-top-color: var(--yellow);
  border-bottom-color: var(--yellow);
  border-left-color: var(--yellow);
  border-right-color: var(--yellow);
}

.border-inherit {
  border-top-color: var(--inherit);
  border-bottom-color: var(--inherit);
  border-left-color: var(--inherit);
  border-right-color: var(--inherit);
}

.border-bg0 {
  border-top-color: var(--bg0);
  border-bottom-color: var(--bg0);
  border-left-color: var(--bg0);
  border-right-color: var(--bg0);
}

.border-bg4 {
  border-top-color: var(--bg4);
  border-bottom-color: var(--bg4);
  border-left-color: var(--bg4);
  border-right-color: var(--bg4);
}

.border-bg-blue {
  border-top-color: var(--bg-blue);
  border-bottom-color: var(--bg-blue);
  border-left-color: var(--bg-blue);
  border-right-color: var(--bg-blue);
}

.border-bg-red {
  border-top-color: var(--bg-red);
  border-bottom-color: var(--bg-red);
  border-left-color: var(--bg-red);
  border-right-color: var(--bg-red);
}

.border-black {
  border-top-color: var(--black);
  border-bottom-color: var(--black);
  border-left-color: var(--black);
  border-right-color: var(--black);
}

.border-diff-red {
  border-top-color: var(--diff-red);
  border-bottom-color: var(--diff-red);
  border-left-color: var(--diff-red);
  border-right-color: var(--diff-red);
}

.border-fg {
  border-top-color: var(--fg);
  border-bottom-color: var(--fg);
  border-left-color: var(--fg);
  border-right-color: var(--fg);
}

.border-orange {
  border-top-color: var(--orange);
  border-bottom-color: var(--orange);
  border-left-color: var(--orange);
  border-right-color: var(--orange);
}

.border-bg3 {
  border-top-color: var(--bg3);
  border-bottom-color: var(--bg3);
  border-left-color: var(--bg3);
  border-right-color: var(--bg3);
}

.border-diff-green {
  border-top-color: var(--diff-green);
  border-bottom-color: var(--diff-green);
  border-left-color: var(--diff-green);
  border-right-color: var(--diff-green);
}

.border-grey {
  border-top-color: var(--grey);
  border-bottom-color: var(--grey);
  border-left-color: var(--grey);
  border-right-color: var(--grey);
}

.border-solid {
  border-top-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-right-style: solid;
}

.border-dashed {
  border-top-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
  border-right-style: dashed;
}

.border-square {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.border-rounded {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-x {
  border-left: 2px solid var(--grey-dim);
  border-right: 2px solid var(--grey-dim);
  margin-left: calc((var(--col) - 2px) / 2);
  margin-right: calc((var(--col) - 2px) / 2);
  padding-left: calc((var(--col) - 2px) / 2);
  padding-right: calc((var(--col) - 2px) / 2);
}

.border-x-0 {
  border-left: 0;
  border-right: 0;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.border-x-blue {
  border-left-color: var(--blue);
  border-right-color: var(--blue);
}

.border-x-diff-blue {
  border-left-color: var(--diff-blue);
  border-right-color: var(--diff-blue);
}

.border-x-green {
  border-left-color: var(--green);
  border-right-color: var(--green);
}

.border-x-transparent {
  border-left-color: var(--transparent);
  border-right-color: var(--transparent);
}

.border-x-bg1 {
  border-left-color: var(--bg1);
  border-right-color: var(--bg1);
}

.border-x-bg2 {
  border-left-color: var(--bg2);
  border-right-color: var(--bg2);
}

.border-x-diff-yellow {
  border-left-color: var(--diff-yellow);
  border-right-color: var(--diff-yellow);
}

.border-x-grey-dim {
  border-left-color: var(--grey-dim);
  border-right-color: var(--grey-dim);
}

.border-x-purple {
  border-left-color: var(--purple);
  border-right-color: var(--purple);
}

.border-x-yellow {
  border-left-color: var(--yellow);
  border-right-color: var(--yellow);
}

.border-x-inherit {
  border-left-color: var(--inherit);
  border-right-color: var(--inherit);
}

.border-x-bg0 {
  border-left-color: var(--bg0);
  border-right-color: var(--bg0);
}

.border-x-bg4 {
  border-left-color: var(--bg4);
  border-right-color: var(--bg4);
}

.border-x-bg-blue {
  border-left-color: var(--bg-blue);
  border-right-color: var(--bg-blue);
}

.border-x-bg-red {
  border-left-color: var(--bg-red);
  border-right-color: var(--bg-red);
}

.border-x-black {
  border-left-color: var(--black);
  border-right-color: var(--black);
}

.border-x-diff-red {
  border-left-color: var(--diff-red);
  border-right-color: var(--diff-red);
}

.border-x-fg {
  border-left-color: var(--fg);
  border-right-color: var(--fg);
}

.border-x-orange {
  border-left-color: var(--orange);
  border-right-color: var(--orange);
}

.border-x-bg3 {
  border-left-color: var(--bg3);
  border-right-color: var(--bg3);
}

.border-x-diff-green {
  border-left-color: var(--diff-green);
  border-right-color: var(--diff-green);
}

.border-x-grey {
  border-left-color: var(--grey);
  border-right-color: var(--grey);
}

.border-x-red {
  border-left-color: var(--red);
  border-right-color: var(--red);
}

.border-x-bg-dim {
  border-left-color: var(--bg-dim);
  border-right-color: var(--bg-dim);
}

.border-x-bg-green {
  border-left-color: var(--bg-green);
  border-right-color: var(--bg-green);
}

.border-x-solid {
  border-left-style: solid;
  border-right-style: solid;
}

.border-x-dashed {
  border-left-style: dashed;
  border-right-style: dashed;
}

.border-x-square {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.border-x-rounded {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-l {
  border-left: 2px solid var(--grey-dim);
  margin-left: calc((var(--col) - 2px) / 2);
  padding-left: calc((var(--col) - 2px) / 2);
}

.border-l-0 {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
}

.border-l-bg-dim {
  border-left-color: var(--bg-dim);
}

.border-l-bg-green {
  border-left-color: var(--bg-green);
}

.border-l-blue {
  border-left-color: var(--blue);
}

.border-l-diff-blue {
  border-left-color: var(--diff-blue);
}

.border-l-green {
  border-left-color: var(--green);
}

.border-l-transparent {
  border-left-color: var(--transparent);
}

.border-l-bg1 {
  border-left-color: var(--bg1);
}

.border-l-bg2 {
  border-left-color: var(--bg2);
}

.border-l-diff-yellow {
  border-left-color: var(--diff-yellow);
}

.border-l-grey-dim {
  border-left-color: var(--grey-dim);
}

.border-l-purple {
  border-left-color: var(--purple);
}

.border-l-yellow {
  border-left-color: var(--yellow);
}

.border-l-inherit {
  border-left-color: var(--inherit);
}

.border-l-bg0 {
  border-left-color: var(--bg0);
}

.border-l-bg4 {
  border-left-color: var(--bg4);
}

.border-l-bg-blue {
  border-left-color: var(--bg-blue);
}

.border-l-bg-red {
  border-left-color: var(--bg-red);
}

.border-l-black {
  border-left-color: var(--black);
}

.border-l-diff-red {
  border-left-color: var(--diff-red);
}

.border-l-fg {
  border-left-color: var(--fg);
}

.border-l-orange {
  border-left-color: var(--orange);
}

.border-l-bg3 {
  border-left-color: var(--bg3);
}

.border-l-diff-green {
  border-left-color: var(--diff-green);
}

.border-l-grey {
  border-left-color: var(--grey);
}

.border-l-red {
  border-left-color: var(--red);
}

.border-l-solid {
  border-left-style: solid;
}

.border-l-dashed {
  border-left-style: dashed;
}

.border-l-square {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.border-l-rounded {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

.border-tl-square {
  border-top-left-radius: 0;
}

.border-tl-rounded {
  border-top-left-radius: 4px;
}

.border-bl-square {
  border-bottom-left-radius: 0;
}

.border-bl-rounded {
  border-bottom-left-radius: 4px;
}

.border-r {
  border-right: 2px solid var(--grey-dim);
  margin-right: calc((var(--col) - 2px) / 2);
  padding-right: calc((var(--col) - 2px) / 2);
}

.border-r-0 {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.border-r-bg4 {
  border-right-color: var(--bg4);
}

.border-r-bg-blue {
  border-right-color: var(--bg-blue);
}

.border-r-bg-red {
  border-right-color: var(--bg-red);
}

.border-r-black {
  border-right-color: var(--black);
}

.border-r-diff-red {
  border-right-color: var(--diff-red);
}

.border-r-fg {
  border-right-color: var(--fg);
}

.border-r-orange {
  border-right-color: var(--orange);
}

.border-r-bg3 {
  border-right-color: var(--bg3);
}

.border-r-diff-green {
  border-right-color: var(--diff-green);
}

.border-r-grey {
  border-right-color: var(--grey);
}

.border-r-red {
  border-right-color: var(--red);
}

.border-r-bg-dim {
  border-right-color: var(--bg-dim);
}

.border-r-bg-green {
  border-right-color: var(--bg-green);
}

.border-r-blue {
  border-right-color: var(--blue);
}

.border-r-diff-blue {
  border-right-color: var(--diff-blue);
}

.border-r-green {
  border-right-color: var(--green);
}

.border-r-transparent {
  border-right-color: var(--transparent);
}

.border-r-bg1 {
  border-right-color: var(--bg1);
}

.border-r-bg2 {
  border-right-color: var(--bg2);
}

.border-r-diff-yellow {
  border-right-color: var(--diff-yellow);
}

.border-r-grey-dim {
  border-right-color: var(--grey-dim);
}

.border-r-purple {
  border-right-color: var(--purple);
}

.border-r-yellow {
  border-right-color: var(--yellow);
}

.border-r-inherit {
  border-right-color: var(--inherit);
}

.border-r-bg0 {
  border-right-color: var(--bg0);
}

.border-r-solid {
  border-right-style: solid;
}

.border-r-dashed {
  border-right-style: dashed;
}

.border-r-square {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.border-r-rounded {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-tr-square {
  border-top-right-radius: 0;
}

.border-tr-rounded {
  border-top-right-radius: 4px;
}

.border-br-square {
  border-bottom-right-radius: 0;
}

.border-br-rounded {
  border-bottom-right-radius: 4px;
}

.border-y {
  border-top: 2px solid var(--grey-dim);
  border-bottom: 2px solid var(--grey-dim);
  margin-top: calc((var(--row) - 2px) / 2);
  margin-bottom: calc((var(--row) - 2px) / 2);
  padding-top: calc((var(--row) - 2px) / 2);
  padding-bottom: calc((var(--row) - 2px) / 2);
}

.border-y-0 {
  border-top: 0;
  border-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.border-y-bg-dim {
  border-top-color: var(--bg-dim);
  border-bottom-color: var(--bg-dim);
}

.border-y-bg-green {
  border-top-color: var(--bg-green);
  border-bottom-color: var(--bg-green);
}

.border-y-blue {
  border-top-color: var(--blue);
  border-bottom-color: var(--blue);
}

.border-y-diff-blue {
  border-top-color: var(--diff-blue);
  border-bottom-color: var(--diff-blue);
}

.border-y-green {
  border-top-color: var(--green);
  border-bottom-color: var(--green);
}

.border-y-transparent {
  border-top-color: var(--transparent);
  border-bottom-color: var(--transparent);
}

.border-y-bg1 {
  border-top-color: var(--bg1);
  border-bottom-color: var(--bg1);
}

.border-y-bg2 {
  border-top-color: var(--bg2);
  border-bottom-color: var(--bg2);
}

.border-y-diff-yellow {
  border-top-color: var(--diff-yellow);
  border-bottom-color: var(--diff-yellow);
}

.border-y-grey-dim {
  border-top-color: var(--grey-dim);
  border-bottom-color: var(--grey-dim);
}

.border-y-purple {
  border-top-color: var(--purple);
  border-bottom-color: var(--purple);
}

.border-y-yellow {
  border-top-color: var(--yellow);
  border-bottom-color: var(--yellow);
}

.border-y-inherit {
  border-top-color: var(--inherit);
  border-bottom-color: var(--inherit);
}

.border-y-bg0 {
  border-top-color: var(--bg0);
  border-bottom-color: var(--bg0);
}

.border-y-bg4 {
  border-top-color: var(--bg4);
  border-bottom-color: var(--bg4);
}

.border-y-bg-blue {
  border-top-color: var(--bg-blue);
  border-bottom-color: var(--bg-blue);
}

.border-y-bg-red {
  border-top-color: var(--bg-red);
  border-bottom-color: var(--bg-red);
}

.border-y-black {
  border-top-color: var(--black);
  border-bottom-color: var(--black);
}

.border-y-diff-red {
  border-top-color: var(--diff-red);
  border-bottom-color: var(--diff-red);
}

.border-y-fg {
  border-top-color: var(--fg);
  border-bottom-color: var(--fg);
}

.border-y-orange {
  border-top-color: var(--orange);
  border-bottom-color: var(--orange);
}

.border-y-bg3 {
  border-top-color: var(--bg3);
  border-bottom-color: var(--bg3);
}

.border-y-diff-green {
  border-top-color: var(--diff-green);
  border-bottom-color: var(--diff-green);
}

.border-y-grey {
  border-top-color: var(--grey);
  border-bottom-color: var(--grey);
}

.border-y-red {
  border-top-color: var(--red);
  border-bottom-color: var(--red);
}

.border-y-solid {
  border-top-style: solid;
  border-bottom-style: solid;
}

.border-y-dashed {
  border-top-style: dashed;
  border-bottom-style: dashed;
}

.border-y-square {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.border-y-rounded {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-t {
  border-top: 2px solid var(--grey-dim);
  margin-top: calc((var(--row) - 2px) / 2);
  padding-top: calc((var(--row) - 2px) / 2);
}

.border-t-0 {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

.border-t-grey {
  border-top-color: var(--grey);
}

.border-t-red {
  border-top-color: var(--red);
}

.border-t-bg-dim {
  border-top-color: var(--bg-dim);
}

.border-t-bg-green {
  border-top-color: var(--bg-green);
}

.border-t-blue {
  border-top-color: var(--blue);
}

.border-t-diff-blue {
  border-top-color: var(--diff-blue);
}

.border-t-green {
  border-top-color: var(--green);
}

.border-t-transparent {
  border-top-color: var(--transparent);
}

.border-t-bg1 {
  border-top-color: var(--bg1);
}

.border-t-bg2 {
  border-top-color: var(--bg2);
}

.border-t-diff-yellow {
  border-top-color: var(--diff-yellow);
}

.border-t-grey-dim {
  border-top-color: var(--grey-dim);
}

.border-t-purple {
  border-top-color: var(--purple);
}

.border-t-yellow {
  border-top-color: var(--yellow);
}

.border-t-inherit {
  border-top-color: var(--inherit);
}

.border-t-bg0 {
  border-top-color: var(--bg0);
}

.border-t-bg4 {
  border-top-color: var(--bg4);
}

.border-t-bg-blue {
  border-top-color: var(--bg-blue);
}

.border-t-bg-red {
  border-top-color: var(--bg-red);
}

.border-t-black {
  border-top-color: var(--black);
}

.border-t-diff-red {
  border-top-color: var(--diff-red);
}

.border-t-fg {
  border-top-color: var(--fg);
}

.border-t-orange {
  border-top-color: var(--orange);
}

.border-t-bg3 {
  border-top-color: var(--bg3);
}

.border-t-diff-green {
  border-top-color: var(--diff-green);
}

.border-t-solid {
  border-top-style: solid;
}

.border-t-dashed {
  border-top-style: dashed;
}

.border-t-square {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.border-t-rounded {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.border-tl-square {
  border-top-left-radius: 0;
}

.border-tl-rounded {
  border-top-left-radius: 4px;
}

.border-tr-square {
  border-top-right-radius: 0;
}

.border-tr-rounded {
  border-top-right-radius: 4px;
}

.border-b {
  border-bottom: 2px solid var(--grey-dim);
  margin-bottom: calc((var(--row) - 2px) / 2);
  padding-bottom: calc((var(--row) - 2px) / 2);
}

.border-b-0 {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.border-b-diff-green {
  border-bottom-color: var(--diff-green);
}

.border-b-grey {
  border-bottom-color: var(--grey);
}

.border-b-red {
  border-bottom-color: var(--red);
}

.border-b-bg-dim {
  border-bottom-color: var(--bg-dim);
}

.border-b-bg-green {
  border-bottom-color: var(--bg-green);
}

.border-b-blue {
  border-bottom-color: var(--blue);
}

.border-b-diff-blue {
  border-bottom-color: var(--diff-blue);
}

.border-b-green {
  border-bottom-color: var(--green);
}

.border-b-transparent {
  border-bottom-color: var(--transparent);
}

.border-b-bg1 {
  border-bottom-color: var(--bg1);
}

.border-b-bg2 {
  border-bottom-color: var(--bg2);
}

.border-b-diff-yellow {
  border-bottom-color: var(--diff-yellow);
}

.border-b-grey-dim {
  border-bottom-color: var(--grey-dim);
}

.border-b-purple {
  border-bottom-color: var(--purple);
}

.border-b-yellow {
  border-bottom-color: var(--yellow);
}

.border-b-inherit {
  border-bottom-color: var(--inherit);
}

.border-b-bg0 {
  border-bottom-color: var(--bg0);
}

.border-b-bg4 {
  border-bottom-color: var(--bg4);
}

.border-b-bg-blue {
  border-bottom-color: var(--bg-blue);
}

.border-b-bg-red {
  border-bottom-color: var(--bg-red);
}

.border-b-black {
  border-bottom-color: var(--black);
}

.border-b-diff-red {
  border-bottom-color: var(--diff-red);
}

.border-b-fg {
  border-bottom-color: var(--fg);
}

.border-b-orange {
  border-bottom-color: var(--orange);
}

.border-b-bg3 {
  border-bottom-color: var(--bg3);
}

.border-b-solid {
  border-bottom-style: solid;
}

.border-b-dashed {
  border-bottom-style: dashed;
}

.border-b-rounded {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.border-b-square {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.border-bl-square {
  border-bottom-left-radius: 0;
}

.border-bl-rounded {
  border-bottom-left-radius: 4px;
}

.border-br-square {
  border-bottom-right-radius: 0;
}

.border-br-rounded {
  border-bottom-right-radius: 4px;
}

/* MERGED BORDERS
 * ====================
 * These utilities are essentially the eqivalent of `-m-1` to use alongside border classes.
 * They are offered as convenience classes to combine containers with adjacent borders.
 * The alternative to this would be to nest the bordered containers in something else,
 * and apply the negative margins to the outer elements; but this can have bad side-effects
 * in more complex layouts, in addition to just complicate things that should be simple.
 * WARNING: These classes will break the grid unless used together with the corresponding borders
 */

.border-merge {
  margin-top: calc((var(--row) + 2px) / -2);
  margin-bottom: calc((var(--row) + 2px) / -2);
  margin-left: calc((var(--col) + 2px) / -2);
  margin-right: calc((var(--col) + 2px) / -2);
}

.border-merge-x {
  margin-left: calc((var(--col) + 2px) / -2);
  margin-right: calc((var(--col) + 2px) / -2);
}

.border-merge-l {
  margin-left: calc((var(--col) + 2px) / -2);
}

.border-merge-r {
  margin-right: calc((var(--col) + 2px) / -2);
}

.border-merge-y {
  margin-top: calc((var(--row) + 2px) / -2);
  margin-bottom: calc((var(--row) + 2px) / -2);
}

.border-merge-t {
  margin-top: calc((var(--row) + 2px) / -2);
}

.border-merge-b {
  margin-bottom: calc((var(--row) + 2px) / -2);
}

/* WIDTHS & HEIGHTS
 * ====================
 * A collection of width and height utilities.
 * Each option comes with a `min-` and `max-` variant.
 */

.w-0 {
  width: calc(var(--col) * 0);
}

.w-1 {
  width: calc(var(--col) * 1);
}

.w-2 {
  width: calc(var(--col) * 2);
}

.w-4 {
  width: calc(var(--col) * 4);
}

.w-8 {
  width: calc(var(--col) * 8);
}

.w-12 {
  width: calc(var(--col) * 12);
}

.w-20 {
  width: calc(var(--col) * 20);
}

.w-32 {
  width: calc(var(--col) * 32);
}

.w-40 {
  width: calc(var(--col) * 40);
}

.w-80 {
  width: calc(var(--col) * 80);
}

.w-100 {
  width: calc(var(--col) * 100);
}

.w-109 {
  width: calc(var(--col) * 109);
}

.w-120 {
  width: calc(var(--col) * 120);
}

.max-w-0 {
  max-width: calc(var(--col) * 0);
}

.max-w-1 {
  max-width: calc(var(--col) * 1);
}

.max-w-2 {
  max-width: calc(var(--col) * 2);
}

.max-w-4 {
  max-width: calc(var(--col) * 4);
}

.max-w-8 {
  max-width: calc(var(--col) * 8);
}

.max-w-12 {
  max-width: calc(var(--col) * 12);
}

.max-w-20 {
  max-width: calc(var(--col) * 20);
}

.max-w-32 {
  max-width: calc(var(--col) * 32);
}

.max-w-40 {
  max-width: calc(var(--col) * 40);
}

.max-w-80 {
  max-width: calc(var(--col) * 80);
}

.max-w-100 {
  max-width: calc(var(--col) * 100);
}

.max-w-109 {
  max-width: calc(var(--col) * 109);
}

.max-w-120 {
  max-width: calc(var(--col) * 120);
}

.min-w-0 {
  min-width: calc(var(--col) * 0);
}

.min-w-1 {
  min-width: calc(var(--col) * 1);
}

.min-w-2 {
  min-width: calc(var(--col) * 2);
}

.min-w-4 {
  min-width: calc(var(--col) * 4);
}

.min-w-8 {
  min-width: calc(var(--col) * 8);
}

.min-w-12 {
  min-width: calc(var(--col) * 12);
}

.min-w-20 {
  min-width: calc(var(--col) * 20);
}

.min-w-32 {
  min-width: calc(var(--col) * 32);
}

.min-w-40 {
  min-width: calc(var(--col) * 40);
}

.min-w-80 {
  min-width: calc(var(--col) * 80);
}

.min-w-100 {
  min-width: calc(var(--col) * 100);
}

.min-w-109 {
  min-width: calc(var(--col) * 109);
}

.min-w-120 {
  min-width: calc(var(--col) * 120);
}

.h-0 {
  height: calc(var(--row) * 0);
}

.h-1 {
  height: calc(var(--row) * 1);
}

.h-2 {
  height: calc(var(--row) * 2);
}

.h-4 {
  height: calc(var(--row) * 4);
}

.h-8 {
  height: calc(var(--row) * 8);
}

.h-12 {
  height: calc(var(--row) * 12);
}

.h-20 {
  height: calc(var(--row) * 20);
}

.h-32 {
  height: calc(var(--row) * 32);
}

.h-40 {
  height: calc(var(--row) * 40);
}

.h-80 {
  height: calc(var(--row) * 80);
}

.h-100 {
  height: calc(var(--row) * 100);
}

.h-109 {
  height: calc(var(--row) * 109);
}

.h-120 {
  height: calc(var(--row) * 120);
}

.max-h-0 {
  max-height: calc(var(--row) * 0);
}

.max-h-1 {
  max-height: calc(var(--row) * 1);
}

.max-h-2 {
  max-height: calc(var(--row) * 2);
}

.max-h-4 {
  max-height: calc(var(--row) * 4);
}

.max-h-8 {
  max-height: calc(var(--row) * 8);
}

.max-h-12 {
  max-height: calc(var(--row) * 12);
}

.max-h-20 {
  max-height: calc(var(--row) * 20);
}

.max-h-32 {
  max-height: calc(var(--row) * 32);
}

.max-h-40 {
  max-height: calc(var(--row) * 40);
}

.max-h-80 {
  max-height: calc(var(--row) * 80);
}

.max-h-100 {
  max-height: calc(var(--row) * 100);
}

.max-h-109 {
  max-height: calc(var(--row) * 109);
}

.max-h-120 {
  max-height: calc(var(--row) * 120);
}

.min-h-0 {
  min-height: calc(var(--row) * 0);
}

.min-h-1 {
  min-height: calc(var(--row) * 1);
}

.min-h-2 {
  min-height: calc(var(--row) * 2);
}

.min-h-4 {
  min-height: calc(var(--row) * 4);
}

.min-h-8 {
  min-height: calc(var(--row) * 8);
}

.min-h-12 {
  min-height: calc(var(--row) * 12);
}

.min-h-20 {
  min-height: calc(var(--row) * 20);
}

.min-h-32 {
  min-height: calc(var(--row) * 32);
}

.min-h-40 {
  min-height: calc(var(--row) * 40);
}

.min-h-80 {
  min-height: calc(var(--row) * 80);
}

.min-h-100 {
  min-height: calc(var(--row) * 100);
}

.min-h-109 {
  min-height: calc(var(--row) * 109);
}

.min-h-120 {
  min-height: calc(var(--row) * 120);
}

/* POSITIONING
 * ====================
 * Position, display, and visibility (including z-index).
 * Also including some `top`, `bottom`, `left`, and `right` options.
 */

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inline {
  display: inline;
}

.block {
  display: block;
}

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

.l-0 {
  left: calc(var(--col) * 0);
}

.l-1 {
  left: calc(var(--col) * 1);
}

.l-2 {
  left: calc(var(--col) * 2);
}

.l-3 {
  left: calc(var(--col) * 3);
}

.l-4 {
  left: calc(var(--col) * 4);
}

.l-6 {
  left: calc(var(--col) * 6);
}

.l-8 {
  left: calc(var(--col) * 8);
}

.l-12 {
  left: calc(var(--col) * 12);
}

.l-20 {
  left: calc(var(--col) * 20);
}

.r-0 {
  right: calc(var(--col) * 0);
}

.r-1 {
  right: calc(var(--col) * 1);
}

.r-2 {
  right: calc(var(--col) * 2);
}

.r-3 {
  right: calc(var(--col) * 3);
}

.r-4 {
  right: calc(var(--col) * 4);
}

.r-6 {
  right: calc(var(--col) * 6);
}

.r-8 {
  right: calc(var(--col) * 8);
}

.r-12 {
  right: calc(var(--col) * 12);
}

.r-20 {
  right: calc(var(--col) * 20);
}

.t-0 {
  top: calc(var(--row) * 0);
}

.t-1 {
  top: calc(var(--row) * 1);
}

.t-2 {
  top: calc(var(--row) * 2);
}

.t-3 {
  top: calc(var(--row) * 3);
}

.t-4 {
  top: calc(var(--row) * 4);
}

.t-6 {
  top: calc(var(--row) * 6);
}

.t-8 {
  top: calc(var(--row) * 8);
}

.t-12 {
  top: calc(var(--row) * 12);
}

.t-20 {
  top: calc(var(--row) * 20);
}

.b-0 {
  bottom: calc(var(--row) * 0);
}

.b-1 {
  bottom: calc(var(--row) * 1);
}

.b-2 {
  bottom: calc(var(--row) * 2);
}

.b-3 {
  bottom: calc(var(--row) * 3);
}

.b-4 {
  bottom: calc(var(--row) * 4);
}

.b-6 {
  bottom: calc(var(--row) * 6);
}

.b-8 {
  bottom: calc(var(--row) * 8);
}

.b-12 {
  bottom: calc(var(--row) * 12);
}

.b-20 {
  bottom: calc(var(--row) * 20);
}

.visible {
  visibility: visible;
}

.hidden {
  visibility: hidden;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-scroll {
  overflow: scroll;
}

.z-1 {
  z-index: 1;
}

.z-10 {
  z-index: 10;
}

.z-100 {
  z-index: 100;
}

.z-1000 {
  z-index: 1000;
}