<h1>Designing simple form controls</h1>
<details>
  <summary>Style</summary>
  <dl>
    <div>
      <dt>color-scheme</dt>
      <dd>
        <ul>
          <li>
            <label>
              <input class="__radio__" type="radio" name="color-scheme" value="light" checked />
              <span>Light</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="color-scheme" value="dark" />
              <span>Dark</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
    <div>
      <dt>leading</dt>
      <dd>
        <ul>
          <li>
            <label>
              <input class="__radio__" type="radio" name="leading" value="1/2" checked />
              <span>1/2em</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="leading" value="2/3" />
              <span>2/3em</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="leading" value="3/4" />
              <span>3/4em</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="leading" value="4/5" />
              <span>4/5em</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="leading" value="1" />
              <span>1em</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
    <div>
      <dt>border-width</dt>
      <dd>
        <ul>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-width" value="thin" checked />
              <span>Thin</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-width" value="medium" />
              <span>Medium</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-width" value="thick" />
              <span>Thick</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
    <div>
      <dt>border-color</dt>
      <dd>
        <ul>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="default" checked />
              <span>Current color</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-10" />
              <span>Gray 10</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-20" />
              <span>Gray 20</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-30" />
              <span>Gray 30</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-40" />
              <span>Gray 40</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-50" />
              <span>Gray 50</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-60" />
              <span>Gray 60</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-70" />
              <span>Gray 70</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-80" />
              <span>Gray 80</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-color" value="gray-90" />
              <span>Gray 90</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
    <div>
      <dt>border-radius</dt>
      <dd>
        <ul>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-radius" value="small" checked />
              <span>Small</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-radius" value="medium" />
              <span>Medium</span>
            </label>
          </li>
          <li>
            <label>
              <input class="__radio__" type="radio" name="border-radius" value="large" />
              <span>Large</span>
            </label>
          </li>
        </ul>
      </dd>
    </div>
  </dl>
</details>
<h2>1. field</h2>
<h3>1-1. input</h3>
<pre><code>&lt;input class=&quot;__field__&quot; type=&quot;text&quot; &hellip; /&gt;</code></pre>
<dl>
  <div>
    <dt>input[class*="__field__"][type="text"]</dt>
    <dd>
      <input class="__field__" type="text" value="text" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="search"]</dt>
    <dd>
      <input class="__field__" type="search" value="search" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="tel"]</dt>
    <dd>
      <input class="__field__" type="tel" value="1234567890" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="url"]</dt>
    <dd>
      <input class="__field__" type="url" value="https://example.com/" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="email"]</dt>
    <dd>
      <input class="__field__" type="email" value="example@example.com" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="password"]</dt>
    <dd>
      <input class="__field__" type="password" value="password" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="date"]</dt>
    <dd>
      <input class="__field__" type="date" value="2001-01-01" min="2001-01-01" max="2100-12-31" step="1" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="month"]</dt>
    <dd>
      <input class="__field__" type="month" value="2001-01" min="2001-01" max="2100-12" step="1" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="week"]</dt>
    <dd>
      <input class="__field__" type="week" value="2001-W01" min="2001-W01" max="2100-W52" step="1" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="time"]</dt>
    <dd>
      <input class="__field__" type="time" value="00:00" min="00:00" max="23:59" step="60" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="datetime-local"]</dt>
    <dd>
      <input class="__field__" type="datetime-local" value="2001-01-01T00:00" min="2001-01-01T00:00" max="2100-12-31T23:59" step="60" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="number"]</dt>
    <dd>
      <input class="__field__" type="number" value="0" min="0" max="10" step="1" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][type="file"]</dt>
    <dd>
      <input class="__field__" type="file" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][size]</dt>
    <dd>
      <input class="__field__" type="text" size="20" value="text" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][placeholder]</dt>
    <dd>
      <input class="__field__" type="text" placeholder="text" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][placeholder][required]</dt>
    <dd>
      <input class="__field__" type="text" placeholder="text" required />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][readonly]</dt>
    <dd>
      <input class="__field__" type="text" value="text" readonly />
    </dd>
  </div>
  <div>
    <dt>input[class*="__field__"][disabled]</dt>
    <dd>
      <input class="__field__" type="text" value="text" disabled />
    </dd>
  </div>
</dl>
<h3>1-2. select</h3>
<pre><code>&lt;select class=&quot;__field__&quot; &hellip; &gt; &hellip; &lt;/select&gt;</code></pre>
<dl>
  <div>
    <dt>select[class*="__field__"]</dt>
    <dd>
      <select class="__field__">
        <option selected disabled>Choose Option</option>
        <optgroup label="Group1">
          <option>Option1-1</option>
          <option>Option1-2</option>
        </optgroup>
        <optgroup label="Group2">
          <option>Option2-1</option>
          <option disabled>Option2-2</option>
        </optgroup>
        <optgroup label="Group3" disabled>
          <option>Option3-1</option>
          <option disabled>Option3-2</option>
        </optgroup>
      </select>
    </dd>
  </div>
  <div>
    <dt>select[class*="__field__"][size="1"]</dt>
    <dd>
      <select class="__field__" size="1">
        <option selected disabled>Choose Option</option>
        <optgroup label="Group1">
          <option>Option1-1</option>
          <option>Option1-2</option>
        </optgroup>
        <optgroup label="Group2">
          <option>Option2-1</option>
          <option disabled>Option2-2</option>
        </optgroup>
        <optgroup label="Group3" disabled>
          <option>Option3-1</option>
          <option disabled>Option3-2</option>
        </optgroup>
      </select>
    </dd>
  </div>
  <div>
    <dt>select[class*="__field__"][size="1"][disabled]</dt>
    <dd>
      <select class="__field__" size="1" disabled>
        <option selected disabled>Choose Option</option>
        <optgroup label="Group1">
          <option>Option1-1</option>
          <option>Option1-2</option>
        </optgroup>
        <optgroup label="Group2">
          <option>Option2-1</option>
          <option disabled>Option2-2</option>
        </optgroup>
        <optgroup label="Group3" disabled>
          <option>Option3-1</option>
          <option disabled>Option3-2</option>
        </optgroup>
      </select>
    </dd>
  </div>
  <div>
    <dt>select[class*="__field__"]:is([multiple], [size]:not([size="1"]))</dt>
    <dd>
      <select class="__field__" size="4" multiple>
        <optgroup label="Group1">
          <option>Option1-1</option>
          <option>Option1-2</option>
        </optgroup>
        <optgroup label="Group2">
          <option>Option2-1</option>
          <option disabled>Option2-2</option>
        </optgroup>
        <optgroup label="Group3" disabled>
          <option>Option3-1</option>
          <option disabled>Option3-2</option>
        </optgroup>
      </select>
    </dd>
  </div>
  <div>
    <dt>select[class*="__field__"][required]:is([multiple], [size]:not([size="1"]))</dt>
    <dd>
      <select class="__field__" size="4" multiple required>
        <optgroup label="Group1">
          <option>Option1-1</option>
          <option>Option1-2</option>
        </optgroup>
        <optgroup label="Group2">
          <option>Option2-1</option>
          <option disabled>Option2-2</option>
        </optgroup>
        <optgroup label="Group3" disabled>
          <option>Option3-1</option>
          <option disabled>Option3-2</option>
        </optgroup>
      </select>
    </dd>
  </div>
  <div>
    <dt>select[class*="__field__"][disabled]:is([multiple], [size]:not([size="1"]))</dt>
    <dd>
      <select class="__field__" size="4" multiple disabled>
        <optgroup label="Group1">
          <option>Option1-1</option>
          <option>Option1-2</option>
        </optgroup>
        <optgroup label="Group2">
          <option>Option2-1</option>
          <option disabled>Option2-2</option>
        </optgroup>
        <optgroup label="Group3" disabled>
          <option>Option3-1</option>
          <option disabled>Option3-2</option>
        </optgroup>
      </select>
    </dd>
  </div>
</dl>
<h3>1-3. textarea</h3>
<pre><code>&lt;textarea class=&quot;__field__&quot; &hellip; &gt; &hellip; &lt;/textarea&gt;</code></pre>
<dl>
  <div>
    <dt>textarea[class*="__field__"]</dt>
    <dd>
      <textarea class="__field__">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</textarea>
    </dd>
  </div>
  <div>
    <dt>textarea[class*="__field__"][cols]</dt>
    <dd>
      <textarea class="__field__" cols="20">THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</textarea>
    </dd>
  </div>
  <div>
    <dt>textarea[class*="__field__"][placeholder]</dt>
    <dd>
      <textarea class="__field__" placeholder="THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG"></textarea>
    </dd>
  </div>
  <div>
    <dt>textarea[class*="__field__"][placeholder][required]</dt>
    <dd>
      <textarea class="__field__" placeholder="THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG" required></textarea>
    </dd>
  </div>
  <div>
    <dt>textarea[class*="__field__"][readonly]</dt>
    <dd>
      <textarea class="__field__" readonly>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</textarea>
    </dd>
  </div>
  <div>
    <dt>textarea[class*="__field__"][disabled]</dt>
    <dd>
      <textarea class="__field__" disabled>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</textarea>
    </dd>
  </div>
</dl>
<h2>2. range</h2>
<pre><code>&lt;input class=&quot;__range__&quot; type=&quot;range&quot; &hellip; /&gt;</code></pre>
<dl>
  <div>
    <dt>input[class*="__range__"][type="range"]</dt>
    <dd>
      <input class="__range__" type="range" value="5" min="0" max="10" step="1" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__range__"][type="range"][disabled]</dt>
    <dd>
      <input class="__range__" type="range" value="5" min="0" max="10" step="1" disabled />
    </dd>
  </div>
</dl>
<h2>3. color</h2>
<pre><code>&lt;input class=&quot;__color__&quot; type=&quot;color&quot; &hellip; /&gt;</code></pre>
<dl>
  <div>
    <dt>input[class*="__color__"][type="color"]</dt>
    <dd>
      <input class="__color__" type="color" value="#ff0000" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__color__"][type="color"][disabled]</dt>
    <dd>
      <input class="__color__" type="color" value="#ff0000" disabled />
    </dd>
  </div>
</dl>
<h2>4. checkbox</h2>
<pre><code>&lt;input class=&quot;__checkbox__&quot; type=&quot;checkbox&quot; &hellip; /&gt;</code></pre>
<dl>
  <div>
    <dt>input[class*="__checkbox__"][type="checkbox"]</dt>
    <dd>
      <label>
        <input class="__checkbox__" type="checkbox" name="checkbox" />
        <span>checkbox</span>
      </label>
    </dd>
  </div>
  <div>
    <dt>input[class*="__checkbox__"][type="checkbox"][checked]</dt>
    <dd>
      <label>
        <input class="__checkbox__" type="checkbox" name="checkbox" checked />
        <span>checkbox</span>
      </label>
    </dd>
  </div>
  <div>
    <dt>input[class*="__checkbox__"][type="checkbox"][disabled]</dt>
    <dd>
      <label>
        <input class="__checkbox__" type="checkbox" name="checkbox" disabled />
        <span>checkbox</span>
      </label>
    </dd>
  </div>
</dl>
<h2>5. radio</h2>
<pre><code>&lt;input class=&quot;__radio__&quot; type=&quot;radio&quot; &hellip; /&gt;</code></pre>
<dl>
  <div>
    <dt>input[class*="__radio__"][type="radio"]</dt>
    <dd>
      <label>
        <input class="__radio__" type="radio" name="radio" />
        <span>radio</span>
      </label>
    </dd>
  </div>
  <div>
    <dt>input[class*="__radio__"][type="radio"][checked]</dt>
    <dd>
      <label>
        <input class="__radio__" type="radio" name="radio" checked />
        <span>radio</span>
      </label>
    </dd>
  </div>
  <div>
    <dt>input[class*="__radio__"][type="radio"][disabled]</dt>
    <dd>
      <label>
        <input class="__radio__" type="radio" name="radio" disabled />
        <span>radio</span>
      </label>
    </dd>
  </div>
</dl>
<h2>6. button</h2>
<pre><code>&lt;input class=&quot;__button__&quot; type=&quot;button&quot; &hellip; /&gt;
&lt;button class=&quot;__button__&quot; type=&quot;button&quot; &hellip; &gt; &hellip; &lt;/button&gt;
&lt;a class=&quot;__button__&quot; &hellip; &gt; &hellip; &lt;/a&gt;</code></pre>
<dl>
  <div>
    <dt>input[class*="__button__"][style~="--background:"]:is([type="submit"], [type="reset"], [type="button"])</dt>
    <dd>
      <input class="__button__" type="button" value="Button" style="--background: var(--red);" />
      <input class="__button__" type="button" value="Button" style="--background: var(--yellow);" />
      <input class="__button__" type="button" value="Button" style="--background: var(--green);" />
      <input class="__button__" type="button" value="Button" style="--background: var(--blue);" />
      <input class="__button__" type="button" value="Button" style="--background: var(--gray);" />
    </dd>
  </div>
  <div>
    <dt>input[class*="__button__"][style~="--background:"][disabled]:is([type="submit"], [type="reset"], [type="button"])</dt>
    <dd>
      <input class="__button__" type="button" value="Button" style="--background: var(--red);" disabled />
      <input class="__button__" type="button" value="Button" style="--background: var(--yellow);" disabled />
      <input class="__button__" type="button" value="Button" style="--background: var(--green);" disabled />
      <input class="__button__" type="button" value="Button" style="--background: var(--blue);" disabled />
      <input class="__button__" type="button" value="Button" style="--background: var(--gray);" disabled />
    </dd>
  </div>
  <div>
    <dt>button[class*="__button__"][style~="--color:"]</dt>
    <dd>
      <button class="__button__" type="button" style="--color: var(--red);">Button</button>
      <button class="__button__" type="button" style="--color: var(--yellow);">Button</button>
      <button class="__button__" type="button" style="--color: var(--green);">Button</button>
      <button class="__button__" type="button" style="--color: var(--blue);">Button</button>
      <button class="__button__" type="button" style="--color: var(--gray);">Button</button>
    </dd>
  </div>
  <div>
    <dt>button[class*="__button__"][style~="--color:"][disabled]</dt>
    <dd>
      <button class="__button__" type="button" style="--color: var(--red);" disabled>Button</button>
      <button class="__button__" type="button" style="--color: var(--yellow);" disabled>Button</button>
      <button class="__button__" type="button" style="--color: var(--green);" disabled>Button</button>
      <button class="__button__" type="button" style="--color: var(--blue);" disabled>Button</button>
      <button class="__button__" type="button" style="--color: var(--gray);" disabled>Button</button>
    </dd>
  </div>
  <div>
    <dt>a[class*="__button__"][style~="--border-radius:"]</dt>
    <dd>
      <a class="__button__" style="--border-radius: 0;">Button</a>
      <a class="__button__" style="--border-radius: var(--radius_small);">Button</a>
      <a class="__button__" style="--border-radius: var(--radius_medium);">Button</a>
      <a class="__button__" style="--border-radius: var(--radius_large);">Button</a>
      <a class="__button__" style="--border-radius: var(--radius_largest);">Button</a>
    </dd>
  </div>
</dl>
<h2>7. progress</h2>
<pre><code>&lt;progress class=&quot;__progress__&quot; &hellip; &gt; &hellip; &lt;/progress&gt;</code></pre>
<dl>
  <div>
    <dt>progress[class*="__progress__"]</dt>
    <dd>
      <progress class="__progress__" value="5" max="10">50%</progress>
    </dd>
  </div>
</dl>
<h2>8. meter</h2>
<pre><code>&lt;meter class=&quot;__meter__&quot; &hellip; &gt; &hellip; &lt;/meter&gt;</code></pre>
<dl>
  <div>
    <dt>meter[class*="__meter__"]</dt>
    <dd>
      <meter class="__meter__" value="2" min="0" max="10" low="4" high="8" optimum="2">20%</meter>
      <meter class="__meter__" value="6" min="0" max="10" low="4" high="8" optimum="2">60%</meter>
      <meter class="__meter__" value="10" min="0" max="10" low="4" high="8" optimum="2">100%</meter>
    </dd>
  </div>
</dl>

:root {
  --red: #f64;
  --yellow: #c80;
  --green: #3a0;
  --blue: #58f;
  --gray: #888;
  --black: #111;
  --white: #fff;
  --black-white: light-dark(var(--black), var(--white));
  --white-black: light-dark(var(--white), var(--black));
  --alpha_lowest: 10%;
  --alpha_low: 30%;
  --alpha_middle: 50%;
  --alpha_high: 70%;
  --alpha_highest: 90%;
  --line_thin: 1px;
  --line_medium: 2px;
  --line_thick: 4px;
  --radius_small: 2px;
  --radius_medium: 4px;
  --radius_large: 8px;
  --radius_largest: calc(1px * infinity);
  --formctrl_border-width: var(--line_thin);
  --formctrl_border-color: currentcolor;
  --formctrl_border-radius: var(--radius_small);
}

/**
 * label
 */
:where(label):where([for], :has(:enabled)) {
  cursor: pointer;
}

/**
 * field
 *   input
 *     text, search, tel, url, email, password, date, month, week, time, datetime-local, number, file
 *   select
 *   textarea
 */
[class*="__field__"] {
  & {
    appearance: none;
    background: none;
    border: solid var(--formctrl_border-width) var(--formctrl_border-color);
    border-radius: var(--formctrl_border-radius);
    box-sizing: border-box;
    color: inherit;
    font: inherit;
    margin-block: calc(0.5lh - 0.5em);
    margin-inline: 0;
    max-inline-size: 100%;
    padding-block: calc(0.5lh - 0.5em);
    padding-inline: calc(1lh - 1em);
    vertical-align: middle;
  }
  &:where(input) {
    &[type="search"] {
      -webkit-appearance: textfield;
    }
    &[type="file"] {
      & {
        cursor: pointer;
      }
      &::file-selector-button {
        display: none;
      }
    }
    &:not([size]) {
      inline-size: 100%;
    }
  }
  &:where(select) {
    * {
      font-size: inherit;
      font-style: inherit;
      line-height: inherit;
    }
    &:is([multiple], [size]) {
      inline-size: 100%;
    }
    &:is([multiple], [size]:not([size="1"])) {
      vertical-align: bottom;
    }
    &:is(:not([multiple], [size]), [size="1"]:not([multiple])) {
      & {
        cursor: pointer;
      }
      * {
        color: FieldText;
        color-scheme: light only;
      }
      :disabled {
        color: GrayText;
      }
      [selected]:disabled {
        display: none;
      }
    }
  }
  &:where(textarea) {
    & {
      min-block-size: 1lh;
      vertical-align: bottom;
    }
    &:not([cols]) {
      inline-size: 100%;
    }
    &:not([rows]) {
      field-sizing: content;
    }
  }
  &[readonly] {
    background:
      color-mix(
        in srgb,
        transparent,
        var(--black-white) var(--alpha_lowest)
      );
  }
  &::placeholder {
    color: color-mix(in srgb, transparent, currentcolor var(--alpha_middle));
    opacity: 1;
  }
  &::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  &::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  &::-webkit-calendar-picker-indicator {
    background-color: Field;
    block-size: 1em;
    border-radius: 50%;
    color-scheme: light only;
    cursor: pointer;
    inline-size: 1em;
  }
  &::-webkit-inner-spin-button {
    height: auto;
  }
  &:invalid {
    box-shadow: 0 0 0 var(--line_thin) var(--red) inset;
  }
  &:user-valid:not(:focus) {
    box-shadow: 0 0 0 var(--line_thin) var(--green) inset;
  }
  &:disabled {
    cursor: auto;
    opacity: var(--alpha_low);
    pointer-events: none;
  }
}

/**
 * range
 */
[class*="__range__"] {
  @supports selector(::-webkit-slider-thumb)
  or selector(::-moz-range-thumb) {
    & {
      --thumb_block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
      --thumb_border: solid var(--formctrl_border-width) var(--formctrl_border-color);
      --thumb_border-radius: var(--radius_largest);
      --thumb_box-shadow:
        calc(-100dvmax - var(--formctrl_border-width) - var(--thumb_block-size))
        0
        0
        100dvmax
        var(--blue),
        calc(100dvmax + var(--formctrl_border-width) + var(--thumb_block-size))
        0
        0
        100dvmax
        color-mix(
          in srgb,
          var(--white-black),
          var(--formctrl_border-color) var(--alpha_low)
        );
      --thumb_clip-path:
        polygon(
          0 0,
          100% 0,
          100% calc(50% - var(--formctrl_border-width)),
          calc(100% + 100dvmax) calc(50% - var(--formctrl_border-width)),
          calc(100% + 100dvmax) calc(50% + var(--formctrl_border-width)),
          100% calc(50% + var(--formctrl_border-width)),
          100% 100%,
          0 100%,
          0 calc(50% - var(--formctrl_border-width)),
          -100dvmax calc(50% - var(--formctrl_border-width)),
          -100dvmax calc(50% + var(--formctrl_border-width)),
          0 calc(50% + var(--formctrl_border-width))
        );
      appearance: none;
      background: none;
      block-size: var(--thumb_block-size);
      box-sizing: border-box;
      color: inherit;
      cursor: pointer;
      font: inherit;
      inline-size: 100%;
      margin: 0;
      overflow: hidden;
      vertical-align: middle;
    }
    &::-webkit-slider-thumb {
      appearance: none;
      background: none;
      block-size: var(--thumb_block-size);
      border: var(--thumb_border);
      border-radius: var(--thumb_border-radius);
      box-shadow: var(--thumb_box-shadow);
      box-sizing: border-box;
      clip-path: var(--thumb_clip-path);
      color: inherit;
      inline-size: var(--thumb_block-size);
    }
    &::-moz-range-thumb {
      background: none;
      block-size: var(--thumb_block-size);
      border: var(--thumb_border);
      border-radius: var(--thumb_border-radius);
      box-shadow: var(--thumb_box-shadow);
      box-sizing: border-box;
      clip-path: var(--thumb_clip-path);
      color: inherit;
      inline-size: var(--thumb_block-size);
    }
    &:dir(rtl) {
      &::-webkit-slider-thumb {
        rotate: 180deg;
      }
      &::-moz-range-thumb {
        rotate: 180deg;
      }
    }
    &:disabled {
      cursor: auto;
      opacity: var(--alpha_low);
      pointer-events: none;
    }
  }
}

/**
 * color
 */
[class*="__color__"] {
  @supports selector(::-webkit-color-swatch)
  or selector(::-moz-color-swatch) {
    & {
      appearance: none;
      background: none;
      block-size: calc(var(--formctrl_border-width) * 2 + 2rem);
      border: solid var(--formctrl_border-width) var(--formctrl_border-color);
      border-radius: var(--radius_largest);
      box-sizing: border-box;
      color: inherit;
      cursor: pointer;
      font: inherit;
      inline-size: calc(var(--formctrl_border-width) * 2 + 2rem);
      margin-block: calc(0.5lh - 0.5em);
      margin-inline: 0;
      padding: 0.125rem;
      vertical-align: bottom;
    }
    &::-webkit-color-swatch-wrapper,
    &::-webkit-color-swatch {
      border: none;
      border-radius: inherit;
      padding: 0;
    }
    &::-moz-color-swatch {
      border: none;
      border-radius: inherit;
      padding: 0;
    }
    &:disabled {
      cursor: auto;
      opacity: var(--alpha_low);
      pointer-events: none;
    }
  }
}

/**
 * checkbox
 */
[class*="__checkbox__"] {
  & {
    appearance: none;
    background: none;
    block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
    border: solid var(--formctrl_border-width) var(--formctrl_border-color);
    border-radius: var(--formctrl_border-radius);
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font: inherit;
    inline-size: calc(var(--formctrl_border-width) * 2 + 1rem);
    margin-block: max(0px, 0.5lh - var(--formctrl_border-width) - 0.5rem);
    margin-inline: 0;
    padding: 0.0625rem;
    vertical-align: bottom;
  }
  &::before {
    block-size: 100%;
    box-shadow: 0 0 0 1rem currentcolor inset;
    clip-path:
      polygon(
        0 37.5%,
        31.25% 68.75%,
        100% 0,
        100% 31.25%,
        31.25% 100%,
        0 68.75%
      );
    display: block;
  }
  &:checked::before {
    content: "";
  }
  &:disabled {
    cursor: auto;
    opacity: var(--alpha_low);
    pointer-events: none;
  }
}

/**
 * radio
 */
[class*="__radio__"] {
  & {
    appearance: none;
    background: none;
    block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
    border: solid var(--formctrl_border-width) var(--formctrl_border-color);
    border-radius: 50%;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font: inherit;
    inline-size: calc(var(--formctrl_border-width) * 2 + 1rem);
    margin-block: max(0px, 0.5lh - var(--formctrl_border-width) - 0.5rem);
    margin-inline: 0;
    padding: 0.125rem;
    vertical-align: bottom;
  }
  &::before {
    block-size: 100%;
    border-radius: inherit;
    box-shadow: 0 0 0 1rem currentcolor inset;
    display: block;
  }
  &:checked::before {
    content: "";
  }
  &:disabled {
    cursor: auto;
    opacity: var(--alpha_low);
    pointer-events: none;
  }
}

/**
 * button
 */
[class*="__button__"] {
  &:where(a) {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
    user-select: none;
  }
  & {
    -webkit-appearance: button;
    background: none;
    border: solid var(--formctrl_border-width) var(--formctrl_border-color);
    border-radius: var(--formctrl_border-radius);
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: bolder;
    margin-block: calc(0.5lh - 0.5em);
    margin-inline: 0;
    max-inline-size: 100%;
    padding-block: calc(0.5lh - 0.5em);
    padding-inline: calc(2lh - 2em);
    position: relative;
    text-wrap: balance;
    text-wrap: pretty;
    touch-action: manipulation;
    transition: box-shadow calc(1s / 5);
    vertical-align: middle;
  }
  &[style~="--background:"] {
    background: var(--background);
    border-color: transparent;
    color: var(--white-black);
  }
  &[style~="--color:"] {
    color: var(--color);
  }
  &[style~="--border-color:"] {
    border-color: var(--border-color);
  }
  &[style~="--border-radius:"] {
    border-radius: var(--border-radius);
  }
  &:hover {
    box-shadow: 0 0 8px -2px var(--black-white);
    z-index: 1;
  }
  &:active {
    box-shadow: none;
    transition: none;
  }
  &:disabled {
    cursor: auto;
    opacity: var(--alpha_low);
    pointer-events: none;
  }
}

/**
 * progress[class*="__progress__"]
 */
[class*="__progress__"] {
  & {
    box-sizing: border-box;
    font: inherit;
    inline-size: 100%;
    margin: 0;
    vertical-align: middle;
  }
  @supports selector(::-webkit-progress-bar)
  and selector(::-webkit-progress-value) {
    &,
    &::-webkit-progress-inner-element,
    &::-webkit-progress-bar {
      background: none;
      block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
      border-radius: var(--radius_largest);
    }
    &::-webkit-progress-bar {
      border: solid var(--formctrl_border-width) var(--formctrl_border-color);
      padding: 0.125rem;
    }
    &::-webkit-progress-value {
      background: var(--blue);
      border-radius: inherit;
    }
  }
  @supports selector(::-moz-progress-bar) {
    & {
      background: none;
      block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
      border: solid var(--formctrl_border-width) var(--formctrl_border-color);
      border-radius: var(--radius_largest);
      padding: 0.125rem;
    }
    &::-moz-progress-bar {
      background: var(--blue);
      border-radius: inherit;
    }
  }
}

/**
 * meter[class*="__meter__"]
 */
[class*="__meter__"] {
  & {
    box-sizing: border-box;
    font: inherit;
    inline-size: 100%;
    margin: 0;
    vertical-align: middle;
  }
  @supports selector(::-webkit-meter-bar)
  and selector(::-webkit-meter-optimum-value)
  and selector(::-webkit-meter-suboptimum-value)
  and selector(::-webkit-meter-even-less-good-value) {
    &,
    &::-webkit-meter-inner-element,
    &::-webkit-meter-bar {
      background: none;
      block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
      border-radius: var(--radius_largest);
    }
    &::-webkit-meter-bar {
      border: solid var(--formctrl_border-width) var(--formctrl_border-color);
      padding: 0.125rem;
    }
    &::-webkit-meter-optimum-value {
      background: var(--green);
      border-radius: inherit;
    }
    &::-webkit-meter-suboptimum-value {
      background: var(--yellow);
      border-radius: inherit;
    }
    &::-webkit-meter-even-less-good-value {
      background: var(--red);
      border-radius: inherit;
    }
  }
  @supports selector(::-moz-meter-bar)
  and selector(:-moz-meter-optimum)
  and selector(:-moz-meter-sub-optimum)
  and selector(:-moz-meter-sub-sub-optimum) {
    & {
      background: none;
      block-size: calc(var(--formctrl_border-width) * 2 + 1rem);
      border: solid var(--formctrl_border-width) var(--formctrl_border-color);
      border-radius: var(--radius_largest);
      padding: 0.125rem;
    }
    &::-moz-meter-bar {
      border-radius: inherit;
    }
    &:-moz-meter-optimum::-moz-meter-bar {
      background: var(--green);
    }
    &:-moz-meter-sub-optimum::-moz-meter-bar {
      background: var(--yellow);
    }
    &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
      background: var(--red);
    }
  }
}

/**
 * Others
 */
html {
  & {
    font-family: ui-sans-serif, system-ui, sans-serif;
    line-height: 1.5;
  }
  &:has([name="color-scheme"][value="dark"]:checked) {
    color-scheme: dark;
  }
  &:has([name="leading"][value="2/3"]:checked) {
    line-height: calc(2 / 3 + 1);
  }
  &:has([name="leading"][value="3/4"]:checked) {
    line-height: calc(3 / 4 + 1);
  }
  &:has([name="leading"][value="4/5"]:checked) {
    line-height: calc(4 / 5 + 1);
  }
  &:has([name="leading"][value="1"]:checked) {
    line-height: 2;
  }
  &:has([name="border-width"][value="medium"]:checked) {
    --formctrl_border-width: var(--line_medium);
  }
  &:has([name="border-width"][value="thick"]:checked) {
    --formctrl_border-width: var(--line_thick);
  }
  &:has([name="border-color"][value="gray-10"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--white-black),
      var(--gray) 20%
    );
  }
  &:has([name="border-color"][value="gray-20"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--white-black),
      var(--gray) 40%
    );
  }
  &:has([name="border-color"][value="gray-30"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--white-black),
      var(--gray) 60%
    );
  }
  &:has([name="border-color"][value="gray-40"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--white-black),
      var(--gray) 80%
    );
  }
  &:has([name="border-color"][value="gray-50"]:checked) {
    --formctrl_border-color: var(--gray);
  }
  &:has([name="border-color"][value="gray-60"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--black-white),
      var(--gray) 80%
    );
  }
  &:has([name="border-color"][value="gray-70"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--black-white),
      var(--gray) 60%
    );
  }
  &:has([name="border-color"][value="gray-80"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--black-white),
      var(--gray) 40%
    );
  }
  &:has([name="border-color"][value="gray-90"]:checked) {
    --formctrl_border-color: color-mix(
      in srgb,
      var(--black-white),
      var(--gray) 20%
    );
  }
  &:has([type="radio"][name="border-radius"][value="medium"]:checked) {
    --formctrl_border-radius: var(--radius_medium);
  }
  &:has([type="radio"][name="border-radius"][value="large"]:checked) {
    --formctrl_border-radius: var(--radius_large);
  }
}
body {
  & {
    background:
      repeating-conic-gradient(
        transparent 0 25%,
        color-mix(in srgb, transparent, currentcolor var(--alpha_lowest)) 25% 50%
      )
      0 0 / 1rem 1rem;
    margin: 0;
    padding-block: 2rem;
    padding-inline: max(2rem, 50dvi - 20rem);
  }
  & > * {
    margin: 0;
  }
  & > :is(* + *) {
    margin-block-start: 2rem;
  }
}
:is(h1, h2, h3, h4, h5, h6):is(* + *) {
  margin-block-start: 4rem;
}
h1 {
  font-size: calc(1em * 12 / 6);
}
h2 {
  font-size: calc(1em * 12 / 7);
}
h3 {
  font-size: calc(1em * 12 / 8);
}
h4 {
  font-size: calc(1em * 12 / 9);
}
h5 {
  font-size: calc(1em * 12 / 10);
}
h6 {
  font-size: calc(1em * 12 / 11);
}
pre,
code {
  font-family: ui-monospace, monospace;
}
pre {
  line-height: 1.25;
  white-space: pre-wrap;
}
details {
  & {
    background: var(--white-black);
    color: var(--black-white);
    color-schema: dark;
    margin-inline: calc(max(2rem, 50dvi - 20rem) * -1);
    padding-block: 1rem;
    padding-inline: max(2rem, 50dvi - 20rem);
    position: sticky;
    inset-block-start: 0;
    z-index: calc(infinity);
  }
  summary {
    & {
      cursor: pointer;
      inline-size: fit-content;
    }
    &:hover {
      text-decoration: underline;
    }
  }
}
dl {
  & {
    display: flex;
    flex-flow: column;
    gap: 1rem;
  }
  dd {
    margin: 0;
  }
  ul {
    & {
      display: grid;
      grid: auto-flow / repeat(auto-fill, minmax(min(8em, 100%), 1fr));
      column-gap: 1em;
      padding: 0;
    }
    li {
      display: block;
      margin: 0;
    }
  }
}