/** @see https://developer.mozilla.org/en-US/docs/Web/CSS/@property */

@property --xxs {
  syntax: "<length>";
  inherits: false;
  initial-value: 6px;
}

@property --xs {
  syntax: "<length>";
  inherits: false;
  initial-value: 10px;
}

@property --s {
  syntax: "<length>";
  inherits: false;
  initial-value: 12px;
}

@property --m {
  syntax: "<length>";
  inherits: false;
  initial-value: 15px;
}

@property --l {
  syntax: "<length>";
  inherits: false;
  initial-value: 18px;
}

@property --xl {
  syntax: "<length>";
  inherits: false;
  initial-value: 24px;
}

@property --xxl {
  syntax: "<length>";
  inherits: false;
  initial-value: 32px;
}

@property --3xl {
  syntax: "<length>";
  inherits: false;
  initial-value: 64px;
}

@property --4xl {
  syntax: "<length>";
  inherits: false;
  initial-value: 128px;
}

@property --5xl {
  syntax: "<length>";
  inherits: false;
  initial-value: 256px;
}

/** Used to calculate dynamic line height based on font-size */
@property --line-height-multiplier {
  syntax: "<number>";
  inherits: false;
  initial-value: 1.6;
}

/** Opt into sizing by setting the "size" attribute on any html tag */
[size] {
  font-size: var(--font-size);
  line-height: calc(var(--font-size) * var(--line-height-multiplier));
}

[size="xxs"] {
  --font-size: var(--xxs);
}

[size="xs"] {
  --font-size: var(--xs);
}

[size="s"] {
  --font-size: var(--s);
}

[size="m"] {
  --font-size: var(--m);
}

[size="l"] {
  --font-size: var(--l);
}

[size="xl"] {
  --font-size: var(--xl);
}

[size="xxl"] {
  --font-size: var(--xxl);
}

[size="3xl"] {
  --font-size: var(--3xl);
}

[size="4xl"] {
  --font-size: var(--4xl);
  line-height: calc(var(--font-size) * 0.9);
}

[size="5xl"] {
  --font-size: var(--5xl);
  line-height: calc(var(--font-size) * 0.9);
}

[width]:not(svg, img) {
  width: var(--width);
}

[width="xxs"] {
  --width: var(--xxs);
}

[width="xs"] {
  --width: var(--xs);
}

[width="s"] {
  --width: var(--s);
}

[width="m"] {
  --width: var(--m);
}

[width="l"] {
  --width: var(--l);
}

[width="xl"] {
  --width: var(--xl);
}

[width="xxl"] {
  --width: var(--xxl);
}

[width="3xl"] {
  --width: var(--3xl);
}

[width="4xl"] {
  --width: var(--4xl);
}

[width="5xl"] {
  --width: var(--5xl);
}

[height] {
  height: var(--height);
}

[height="xxs"] {
  --height: var(--xxs);
}

[height="xs"] {
  --height: var(--xs);
}

[height="s"] {
  --height: var(--s);
}

[height="m"] {
  --height: var(--m);
}

[height="l"] {
  --height: var(--l);
}

[height="xl"] {
  --height: var(--xl);
}

[height="xxl"] {
  --height: var(--xxl);
}

[height="3xl"] {
  --height: var(--3xl);
}

[height="4xl"] {
  --height: var(--4xl);
}

[height="5xl"] {
  --height: var(--5xl);
}

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

[width="1/2"] {
  --width: 50%;
}

[width="1/3"] {
  --width: 33.33333333%;
}

[width="1/4"] {
  --width: 25%;
}

[width="1/5"] {
  --width: 20%;
}

[width="1/6"] {
  --width: 16%;
}

[width="1/8"] {
  --width: 12.5%;
}

[width="1/10"] {
  --width: 10%;
}

[width="1/12"] {
  --width: 8.33333333%%;
}