/****************************************************************
* Sizes
*****************************************************************/

.i-px { inline-size: 1px; }

.size-3 {
  width: var(--size-3);
  height: var(--size-3);
}

.size-4 {
  width: var(--size-4);
  height: var(--size-4);
}

.size-5 {
  width: var(--size-5);
  height: var(--size-5);
}

.size-6 {
  width: var(--size-6);
  height: var(--size-6);
}

.size-10 {
  width: var(--size-10);
  height: var(--size-10);
}

.size-12 {
  width: var(--size-12);
  height: var(--size-12);
}

.size-16 {
  width: var(--size-16);
  height: var(--size-16);
}

.size-24 {
  width: var(--size-24);
  height: var(--size-24);
}

/****************************************************************
* Layout
*****************************************************************/

.i-72 { inline-size: var(--size-72); }
.max-i-72 { inline-size: var(--size-72); }

.max-b-none { max-block-size: none; }
.max-b-full { max-block-size: 100%; }

.max-i-2xs { max-inline-size: var(--max-i-2xs); }
.max-i-xs { max-inline-size: var(--max-i-xs); }
.max-i-sm { max-inline-size: var(--max-i-sm); }
.max-i-md { max-inline-size: var(--max-i-md); }
.max-i-lg { max-inline-size: var(--max-i-lg); }
.max-i-xl { max-inline-size: var(--max-i-xl); }
.max-i-2xl { max-inline-size: var(--max-i-2xl); }
.max-i-3xl { max-inline-size: var(--max-i-3xl); }
.max-i-4xl { max-inline-size: var(--max-i-4xl); }
.max-i-5xl { max-inline-size: var(--max-i-5xl); }

/* .overflow-y-auto { */
/*   scrollbar-gutter: stable both-edges; */
/* } */

.absolute { position: absolute; }

.top-0 { top: 0; }
.right-0 { right: 0; }
.left-0 { left: 0; }
.bottom-0 { bottom: 0; }

.grid {
  display: grid;
}

.grid-cols {
  grid-template-columns: repeat(var(--grid-cols, 1), 1fr);
}

.grid-cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(var(--grid-inline-size, 150px), 1fr));
}

.hidden { display: none; }

.gap-2 { gap: var(--size-2); }
.gap-3 { gap: var(--size-3); }
.gap-4 { gap: var(--size-4); }
.gap-5 { gap: var(--size-5); }
.gap-6 { gap: var(--size-6); }

.bottom { bottom: var(--bottom-size, 0); }
.bottom-0 { bottom: 0; }

.inset-0 { inset: 0; }

/****************************************************************
* Colors
*****************************************************************/

.bg-base { background-color: white; }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-positive { background-color: var(--color-positive); }
.bg-negative { background-color: var(--color-negative); }
.bg-highlight { background-color: var(--color-highlight); }
.bg-info { background-color: var(--color-info); }

.text-white { color: white; }

/****************************************************************
* SVG
*****************************************************************/

.stroke-0_5 { stroke-width: 0.5; }
.stroke-1   { stroke-width: 1; }
.stroke-2   { stroke-width: 2; }

/****************************************************************
* z-index
*****************************************************************/

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }