<form id="form" data-app="top">
  <fieldset>
    <legend>CSS Icons: Adjust</legend>
    <label>Stroke-Width	<input type="number" name="stroke" min="1" max="5" value="2" /></label>
    <label>Size	<input type="number" name="size" min="0.5" max="3" step="0.1" value="1.5" /></label>
    <label><input type="checkbox" name="fill" />Fill</label>
    <label><input type="checkbox" name="outline" />Outline</label>
    <label><input type="checkbox" name="square" />Square</label>
  </fieldset>
</form>

<main>
  <button type="button"><span data-css-icon="chv-up">chv-up<i></i></span></button>
  <button type="button"><span data-css-icon="chv-down">chv-down<i></i></span></button>
  <button type="button"><span data-css-icon="chv-left">chv-left<i></i></span></button>
  <button type="button"><span data-css-icon="chv-right">chv-right<i></i></span></button>
  <button type="button"><span data-css-icon="arr-up">arr-up<i></i></span></button>
  <button type="button"><span data-css-icon="arr-down">arr-down<i></i></span></button>
  <button type="button"><span data-css-icon="arr-left">arr-left<i></i></span></button>
  <button type="button"><span data-css-icon="arr-right">arr-right<i></i></span></button>
  <button type="button"><span data-css-icon="tri-up">tri-up<i></i></span></button>
  <button type="button"><span data-css-icon="tri-down">tri-down<i></i></span></button>
  <button type="button"><span data-css-icon="tri-left">tri-left<i></i></span></button>
  <button type="button"><span data-css-icon="tri-right">tri-right<i></i></span></button>
  <button type="button"><span data-css-icon="plus">plus<i></i></span></button>
  <button type="button"><span data-css-icon="minus">minus<i></i></span></button>
  <button type="button"><span data-css-icon="cross">cross<i></i></span></button>
  <button type="button"><span data-css-icon="equals">equals<i></i></span></button>
  <button type="button"><span data-css-icon="menu">menu*<i><b></b></i></span></button>
  <button type="button"><span data-css-icon="search">search<i></i></span></button>
  <button type="button"><span data-css-icon="refresh">refresh<i></i></span></button>
  <button type="button"><span data-css-icon="play">play<i></i></span></button>
  <button type="button"><span data-css-icon="pause">pause<i></i></span></button>
  <button type="button"><span data-css-icon="stop">stop<i></i></span></button>
  <button type="button"><span data-css-icon="bag">bag<i></i></span></button>
  <button type="button"><span data-css-icon="check">check<i></i></span></button>
  <button type="button"><span data-css-icon="heart">heart<i></i></span></button>
  <button type="button"><span data-css-icon="user">user<i></i></span></button>
  <button type="button"><span data-css-icon="star">star<i></i></span></button>
  <button type="button"><span data-css-icon="home">home<i></i></span></button>
  <button type="button"><span data-css-icon="bookmark">bookmark<i></i></span></button>
  <button type="button"><span data-css-icon="lock">lock<i></i></span></button>
  <button type="button"><span data-css-icon="email">email<i></i></span></button>
  <button type="button"><span data-css-icon="message">message<i></i></span></button>
  <button type="button"><span data-css-icon="map">map<i></i></span></button>
  <button type="button"><span data-css-icon="cart">cart<i></i></span></button>
  <button type="button"><span data-css-icon="video">video<i></i></span></button>
  <button type="button"><span data-css-icon="phone">phone<i></i></span></button>

  <h2>Icons with state / toggle</h2>
  <details>
    <summary>
      <span data-css-icon="chv-down">chv-down<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="plus">plus<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="chv-right">chv-right<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="cross-turn">cross-turn<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="equals">equals<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="menu">menu*<i><b></b></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="tri-down">tri-down<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  <details>
    <summary>
      <span data-css-icon="tri-right">tri-right<i></i></span>
    </summary>
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eos minus quo ipsam culpa! Dicta, reiciendis.
    </div>
  </details>
  
  <h2>Animated Icons</h2>
  <button type="button"><span data-css-icon="typing">typing*<i><b></b></i></span></button>
  <button type="button"><span data-css-icon="spin">spin<i></i></span></button>
  <button type="button"><span data-css-icon="dashed">dashed<i></i></span></button>
  <button type="button"><span data-css-icon="dotloader">dotloader<i></i></span></button>

 <h2>How To Use</h2>
  Add <code>&lt;span data-css-icon="ICON-NAME"&gt;[OPTIONAL] TEXT&lt;i&gt;&lt;/i&gt;&lt;/span&gt;</code>
  <p>*) Requires extra <code>&lt;b&gt;&lt/b&gt;</code>-tag within <code>&lt;i&gt;&lt;/i&gt;</code>-tag.</p>
</main>
:root {
  /* The values below should normally be placed under [data-css-icon], they're only at :root in this demo */
  --icon-bdw: 2px;
  --icon-size: 1.5rem;
  --size: 3.75rem;
}
[data-css-icon] {
  --animdur: .3s;
  --loading-animdur: 0.8s;
  --animtf: ease-in;
  --bdrs: 50%;
  --bgc: inherit;
  --c: currentcolor;
  --dots-bgc: silver;
  --dots-size: calc(var(--size, 2.5rem) / 5);
  --rgb: 0, 0, 0;

  align-items: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}
[data-css-icon] i {
  --half: calc(var(--icon-size) / 2);
  align-items: center;
  background-color: var(--bgc);
  border-radius: var(--bdrs);
  box-sizing: content-box;
  display: inline-flex;
  height: var(--size);
  justify-content: center;
  position: relative;
  transition: background-color var(--animdur) var(--animtf);
  width: var(--size);
}
[data-css-icon] i b,
[data-css-icon] i::after,
[data-css-icon] i::before {
  --bdc: transparent;
  --bdrs: 0;
  --bdw: 0;
  --befc: unset;
  --bgcl: transparent;
  --cpa: none;
  --h: var(--icon-size);
  --l: initial;
  --o: 1;
  --pos: relative;
  --r: initial;
  --t: initial;
  --trf: none;
  --trfo: 50% 50%;
  --w: var(--icon-size);
  background-color: var(--bgcl);
  border-color: var(--bdc);
  border-radius: var(--bdrs);
  border-style: solid;
  border-width: var(--bdw);
  box-sizing: border-box;
  clip-path: var(--cpa);
  content: "";
  display: inline-block;
  height: var(--h);
  left: var(--l);
  margin: 0;
  opacity: var (--o);
  position: var(--pos);
  right: var(--r);
  top: var(--t);
  transform: var(--trf);
  transform-origin: var(--trfo);
  transition: all var(--animdur) var(--animtf);
  width: var(--w);
}
[data-css-icon] i::before {
  content: var(--befc);
}

/* ARROWS / CHEVRONS / TRIANGLES */
[data-css-icon*="arr-"] i::after,
[data-css-icon*="chv-"] i::after {
  --bdc: var(--c);
}
[data-css-icon*="arr-"] i::after {
  --bdw: 0 var(--icon-bdw) var(--icon-bdw) 0;
  --trf: rotate(45deg);
}
[data-css-icon*="chv-"] i::after {
  --bdw: 0 var(--icon-bdw) var(--icon-bdw) 0;
  --trl: calc(0px - (var(--icon-size) / 6));
  --trf: rotate(45deg) translate(var(--trl), var(--trl));
}
[data-css-icon*="arr-"] i::before {
  --trf: rotate(90deg) translateX(calc(0px - var(--icon-bdw)));
}
[data-css-icon*="tri-"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(10% 20%,50% 90%,90% 20%);
}
[data-css-icon*="-left"] i { transform: rotate(90deg); }
[data-css-icon*="-right"] i { transform: rotate(-90deg); }
[data-css-icon*="-up"] i { transform: rotate(180deg); }

/* LINES: MINUS, PLUS, EQUALS, MENU */
[data-css-icon*="arr-"] i::before,
[data-css-icon*="equals"] i::after,
[data-css-icon*="equals"] i::before,
[data-css-icon*="cross"] i::after,
[data-css-icon*="cross"] i::before,
[data-css-icon*="menu"] i b,
[data-css-icon*="menu"] i::after,
[data-css-icon*="menu"] i::before,
[data-css-icon*="minus"] i::after,
[data-css-icon*="plus"] i::after,
[data-css-icon*="plus"] i::before {      
  /* Width need to be the diagonal of the down-arrow side-length (--size): sqrt(2) * --size. */
  --bgcl: var(--c);
  --befc: '';
  --h: var(--icon-bdw);
  --pos: absolute;
  --w: calc(var(--icon-size) * 1.4142135623730950488016887242097);
}
[data-css-icon*="cross"] i::after { --trf: rotate(45deg); }
[data-css-icon*="cross"] i::before { --trf: rotate(135deg); }
[data-css-icon*="cross-turn"] i::after { --trf: rotate(0deg); }
[data-css-icon*="cross-turn"] i::before,
[data-css-icon*="plus"] i::before { --trf: rotate(90deg); }
[data-css-icon*="equals"] i { --dist: calc(var(--icon-size) / 4); }
[data-css-icon*="equals"] i::after { --trf: translateY(var(--dist)); }
[data-css-icon*="equals"] i::before { --trf: translateY(calc(0px - var(--dist))); }
[data-css-icon*="menu"] i::after { --trf: translateY(var(--half)); }
[data-css-icon*="menu"] i::before { --trf: translateY(calc(0px - var(--half))); }

/* OTHER ICONS */
[data-css-icon*="bag"] i::after {
  --bdc: var(--c);
  --bdrs: 0.25em;
  --bdw: var(--icon-bdw);
}
[data-css-icon*="bag"] i::before {
  --bdc: var(--c);
  --bdrs: 50% 50% 0 0 / 100% 100% 0 0;
  --bdw: var(--icon-bdw);
  --befc: '';
  --h: calc(var(--icon-size) / 3);
  --pos: absolute;
  --t: calc((var(--icon-size) / 2.5) + 2px);
  --w: calc(var(--half) + var(--bdw));
  border-bottom-width: 0;
}
[data-css-icon*="bookmark"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(90% 0%,90% 70%,50% 100%,10% 70%,10% 0%);
}
[data-css-icon*="cart"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(3% 10%,21% 10%,28% 30%,100% 30%,81% 66%,42% 66%,45% 74%,79% 74%,76% 81%,40% 81%,16% 17%,0% 17%);
  --trf: scale(1.2);
}
[data-css-icon*="cart"] i::before {
  --bdrs: 50%;
  --befc: '';
  --bgcl: transparent;
  --pos: absolute;
  --h: calc(var(--icon-size) / 8);
  --w: var(--h);
  box-shadow:
    calc(var(--h) * -0.25) var(--half)  0 0 rgba(var(--rgb), 1),
    calc(var(--h) * 1.25) var(--half)  0 0 rgba(var(--rgb), 1)
}
[data-css-icon*="check"] i::after {
  --bdc: var(--c);
  --bdw: 0 var(--icon-bdw) var(--icon-bdw) 0;
  --t: calc(var(--icon-size) / -6);
  --trf: rotate(45deg);
  --w: var(--half);
}
[data-css-icon*="email"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(0% 85%,0% 15%,100% 15%,50% 60%,0% 15%,0% 25%,50% 70%,100% 25%,100% 85%);
}
[data-css-icon*="heart"] i::after,
[data-css-icon*="heart"] i::before {
  --bdrs: var(--w) var(--w) 0 0;
  --befc: '';
  --bgcl: var(--c);
  --pos: absolute;
  --r: var(--w);
  --trf: rotate(-45deg);
  --trfo: 0 100%;
  --w: calc(var(--icon-size) / 1.6);
}
[data-css-icon*="heart"] i::after {
  --r: calc(var(--w) * 2);
  --trf: rotate(45deg);
  --trfo: 100% 100%;
}
[data-css-icon*="home"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(50% 0%,100% 40%,100% 100%,65% 100%,65% 65%,35% 65%,35% 100%,0% 100%,0% 40%);
}
[data-css-icon*="lock"] i::after {
  --bdc: var(--c);
  --bdrs: calc(var(--icon-size) / 10);
  --bdw: calc(var(--icon-size) / 5);
  --h: calc(var(--icon-size) * 0.7);
  --pos: absolute;
  --t: var(--icon-size);
  border-right-width: calc(var(--icon-size) / 2.5);
  border-left-width: calc(var(--icon-size) / 2.5);
}
[data-css-icon*="lock"] i::before {
  --bdc: var(--c);
  --bdw: calc(var(--icon-size) * 0.175);
  --befc: '';
  --h: calc(var(--icon-size) * 0.4);
  --pos: absolute;
  --t: calc(var(--icon-size) * 0.6);
  --w: calc(var(--icon-size) * 0.7);
  border-bottom-width: 0;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}
[data-css-icon*="message"] i::after {
  --bgcl: var(--c);
  /* --cpa: polygon(0% 5%,100% 5%,100% 70%,70% 70%,40% 100%,40% 70%,0% 70%); */
  --cpa: polygon(0% 0%,100% 0%,100% 75%,70% 75%,70% 30%,55% 30%,55% 45%,70% 45%,70% 75%,40% 100%,40% 75%,40% 30%,25% 30%,26% 46%,40% 45%,40% 75%,0% 75%);
}
[data-css-icon*="pause"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(40% 0%,0% 0%,0% 100%,40% 100%,40% 0%,60% 0%,100% 0%,100% 100%,60% 100%,60% 0%);
}
[data-css-icon*="map"] i::after {
  --p60: calc(var(--w) * 0.6);
  --bdrs: var(--p60) var(--p60) 0 var(--p60);
  --bgcl: var(--c) ;
  --trf: rotate(45deg);
}
[data-css-icon*="map"] i::before {
  --bdrs: 50%;
  --befc: '';
  --h: calc(var(--icon-size) / 3);
  --w: var(--h);
  --pos: absolute;
  --bgcl: var(--bgc, #FFF);
  z-index: 1;
}
[data-css-icon*="phone"] i::after {
  --bdrs: calc(var(--icon-size) / 10);
  --bgcl: var(--c);
  --cpa: polygon(0% 0%,100% 0%,100% 100%,85% 100%,85% 15%,15% 15%,15% 75%,85% 75%,85% 100%,60% 100%,60% 81%,40% 81%,40% 94%,61% 94%,60% 100%,0% 100%);
  --w: calc(var(--icon-size) * 0.65);
}
[data-css-icon*="play"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(16% 0%,15% 100%,100% 50%);
}
[data-css-icon*="refresh"] i::before {
  --befc: '';
  --bgcl: var(--c);
  --cpa: polygon(40% 35%,75% 50%,80% 15%);
  --l: var(--icon-size);
  --pos: absolute;
}
[data-css-icon*="refresh"] i::after {
  --bdc: var(--c);
  --bdw: var(--icon-bdw);
  --bdrs: 50%;
  --cpa: polygon(0% 0%,100% 0%,100% 25%,50% 50%,100% 70%,100% 100%,0% 100%);
}
[data-css-icon*="search"] i::after {
  --pos: absolute;
  --bgcl: var(--c);
  --h: var(--icon-bdw);
  --trf: rotate(37deg) translate(calc(var(--icon-size) * 0.75), 0px);
  --w: var(--half);
}
[data-css-icon*="search"] i::before {
  --bdc: var(--c);
  --bdrs: 50%;
  --bdw: var(--icon-bdw);
  --befc: '';
}
[data-css-icon*="star"] i::after {
  --bgcl: var(--c);
  --cpa: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  --h: calc(var(--icon-size) * 1.25);
  --w: calc(var(--icon-size) * 1.25);
}
[data-css-icon*="stop"] i::after {
  --bgcl: var(--c);
}
[data-css-icon*="user"] i::after {
  --bgcl: var(--c);
  --h: var(--half);
  --pos: absolute;
  --t: calc(var(--icon-size) * 1.25);
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
}
[data-css-icon*="user"] i::before {
  --bdrs: 50%;
  --befc: '';
  --bgcl: var(--c);
  --h: var(--half);
  --pos: absolute;
  --t: calc(var(--icon-size) * 0.75);
  --w: var(--half);
}
[data-css-icon*="video"] i::after {
  --bdrs: 50% / 100%;
  --bgcl: var(--c);
  --cpa: polygon(70% 20%,70% 50%,100% 25%,100% 75%,70% 50%,70% 80%,0% 80%,0% 20%);
}

/* ANIMATED */
[data-css-icon*="typing"] i b,
[data-css-icon*="typing"] i::after,
[data-css-icon*="typing"] i::before {
  animation: typing var(--loading-animdur) infinite alternate;
  --bdrs: 50%;
  --bgcl: var(--c);
  --h: var(--dots-size);
  --w: var(--dots-size);
}
[data-css-icon*="typing"] i b {
  animation-delay: var(--loading-animdur);
}
[data-css-icon*="typing"] i::after {
  --l: calc(var(--dots-size) / 3);
  animation-delay: calc(var(--loading-animdur) * 1.75);
}
[data-css-icon*="typing"] i::before {
  --befc: '';
  --l: calc(0px - (var(--dots-size) / 3));
  animation-delay: 0;
}
[data-css-icon*="spin"] i::after {
  --bdc: var(--dots-bgc);
  --bdrs: 50%;
  --bdw: var(--icon-bdw);
  --h: calc(var(--icon-size) * 1.5);
  --trf: translateZ(0);
  --w: calc(var(--icon-size) * 1.5);
  animation: spin var(--loading-animdur) infinite linear;
  border-left: var(--icon-bdw) solid var(--c);
}
[data-css-icon*="dashed"] i::after {
  --bdc: var(--dots-bgc);
  --bdrs: 50%;
  --bdw: var(--icon-bdw);
  --h: calc(var(--icon-size) * 1.5);
  --w: var(--h);
  animation: spin var(--loading-animdur) infinite linear;
  border-style: dashed;
}
[data-css-icon*="dotloader"] i::after {
  --bdrs: 50%;
  --h: calc(var(--icon-size) / 3);
  --w: var(--h);
  --dot: calc(var(--icon-size) - var(--h));
  --num: 0.7; /* 45deg, 135deg, 225deg, 315deg (was 0.69231) */
  animation: spin var(--loading-animdur) infinite steps(8);
  box-shadow:
    0 calc(var(--dot) * -1) 0 0 rgba(var(--rgb), 1), 
    calc(var(--dot) * var(--num)) calc(var(--dot) * var(--num) * -1) 0 0 rgba(var(--rgb), 0.2), 
    var(--dot) 0 0 0 rgba(var(--rgb), 0.2), 
    calc(var(--dot) * var(--num)) calc(var(--dot) * var(--num)) 0 0 rgba(var(--rgb), 0.2), 
    0 var(--dot) 0 0 rgba(var(--rgb), 0.2), 
    calc(var(--dot) * var(--num) * -1) calc(var(--dot) * var(--num)) 0 0 rgba(var(--rgb), 0.2), 
    calc(var(--dot) * -1) 0 0 0 rgba(var(--rgb), 0.5), 
    calc(var(--dot) * var(--num) * -1) calc(var(--dot) * var(--num) * -1) 0 0 rgba(var(--rgb), 0.7);
}

/* ADDITIONAL MODIFIERS */
[data-css-icon*="outline"] i {
  border: var(--icon-bdw) solid var(--c);
  box-sizing: border-box;
}
[data-css-icon*="fill"] {
  --bgc: hsl(195, 10%, 30%);
  --c: hsl(195, 10%, 95%);
  --rgb: 255, 255, 255;
}
[data-css-icon*="square"] {
  --bdrs: 5px;
}

/* STATES: details[open] */
[open] > summary > [data-css-icon*="chv-down"] i::after { --trl: calc(var(--icon-size) / 6); --trf: rotate(45deg) translate(var(--trl), var(--trl)) scale(-1);}
[open] > summary > [data-css-icon*="chv-right"] i::after { --trf: rotate(135deg) translate(var(--trl), var(--trl)); }
[open] > summary > [data-css-icon*="cross-turn"] i::after { --trf: rotate(45deg); }
[open] > summary > [data-css-icon*="cross-turn"] i::before { --trf: rotate(135deg); }
[open] > summary > [data-css-icon*="equals"] i::after,
[open] > summary > [data-css-icon*="menu"] i::after { --trf: rotate(-45deg); }
[open] > summary > [data-css-icon*="equals"] i::before,
[open] > summary > [data-css-icon*="menu"] i::before { --trf: rotate(45deg); }
[open] > summary > [data-css-icon*="menu"] i b { --o: 0; --trf: translateX(100px); }
[open] > summary > [data-css-icon*="plus"] i::after { --trf: rotate(180deg); }
[open] > summary > [data-css-icon*="plus"] i::before { --trf: rotate(-0deg); }
[open] > summary > [data-css-icon*="tri-down"] i::after { --trf: scale(-1); }
[open] > summary > [data-css-icon*="tri-right"] i::after { --trf: rotate(90deg); }

/* ANIMATIONS */
@keyframes typing {
  0% {
    background-color: var(--c);
  }
  50%,
  100% {
    background-color: var(--dots-bgc);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}

/* * * END CSS ICONS * * */

/* For this demo only */
body { background-color: hsl(210, 20%, 90%); font-family: ui-sans-serif, system-ui, sans-serif; line-height: 1.6; margin: 0 auto; max-width: 32rem; padding: 0 2rem; } 
code { background-color: hsl(210, 20%, 70%); font-family: ui-monospace, monospace; font-size: 75%; font-weight: normal; padding: 0.15em; }
[data-app] fieldset { border: 1px solid #888; padding: 0 0.75em; }
[data-app] { position: fixed; background-color: #1e1e1e; font-family: ui-monospace, monospace; left: 0; padding: 0.5em; right: 0; top: 0; z-index: 2; }
[data-app] button, [data-app] input:not([type=checkbox]), [data-app] select { background: transparent; border: 1px solid #888; border-radius: 0; color: #d7ba7d; font-family: inherit; font-size: small; padding: 0.25em 0.5em; -webkit-appearance: none; }
[data-app] button { background: #ce9178; border-color: #ce9178; color: black; }
[data-app] label { color: #9cdcfe; display: inline-block; margin: 0.25em 0 0.75em 0; }
[data-app] legend { color: #9cdcfe; }
[data-app="top"] + main { padding: 100px 0; }

button, details { width: calc(50% - 0.5rem); }
button, summary { 
  --sum-bgc: hsl(195, 10%, 98%);
  background-color: var(--sum-bgc);
  border: 0;
  border-radius: 5px;
  color: var(--sum-c, inherit);
  font-family: inherit; font-size: inherit;
  list-style-type: none;
  margin: 0.25rem 0 0.25rem 0.25rem;
  outline: none;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
  padding-inline-end: 0.5rem;
  padding-inline-start: 1rem;
  user-select: none;
}

details {
  overflow: hidden;
}
details[open] summary + * {
  opacity: 1;
  transform: translateY(0);
}
summary::marker { display: none; }
summary::-webkit-details-marker { display: none; }

[open] > summary {
  --sum-bgc: hsl(195, 10%, 20%);
  --sum-c: hsl(195, 10%, 92%);
}
button:focus,
summary:focus {
  box-shadow: inset 0 0 0 2px hsl(195, 10%, 20%);
}
[open] > summary:focus {
  --sum-bgc: hsl(195, 10%, 10%);
    --sum-c: hsl(195, 10%, 99%);
}
[open] > summary:focus > [data-css-icon*="fill"],
[open] > summary > [data-css-icon*="fill"] {
  --bgc: hsl(195, 10%, 80%);
  --c: hsl(195, 10%, 10%);
}

details summary + * {
  animation: scale-in 0.3s ease-in-out both;
  color: #777;
  line-height: 1.6;
  opacity: 0;
  padding: 0.5rem;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
    transform-origin: 0% 0%;
    opacity: 0.25;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}
/* For this demo only */
const form = document.getElementById('form');
const icons = document.querySelectorAll('[data-css-icon]');
form.onchange = (event) => {
  const target = event.target;
  switch(target.name) {
    case 'fill':
      icons.forEach(icon => {
        target.checked ? icon.dataset.cssIcon += ' fill' : icon.dataset.cssIcon = icon.dataset.cssIcon.replace(' fill', '');
      })
      break;
    case 'outline':
      icons.forEach(icon => {
        target.checked ? icon.dataset.cssIcon += ' outline' : icon.dataset.cssIcon = icon.dataset.cssIcon.replace(' outline', '');
      })
      break;
    case 'size':
      document.documentElement.style.setProperty('--icon-size', `${target.value}rem`);
      document.documentElement.style.setProperty('--size', `${target.value * 2.5}rem`);
      break;
    case 'stroke':
      document.documentElement.style.setProperty('--icon-bdw', `${target.value}px`);
      break;
    case 'square':
      icons.forEach(icon => {
        target.checked ? icon.dataset.cssIcon += ' square' : icon.dataset.cssIcon = icon.dataset.cssIcon.replace(' square', '');
      })
      break;
    default: break;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.