.toggle {
  background-color: #01087f;
  border-radius: 10px;
  color: #FFF;
  cursor: pointer;
  display: inline-block;
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 10px 10px -10px;
  padding: 5px 10px;
}

/* FROM OTHER PEN, CODEPEN EMBED IS DOWN 503: */
: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: 1rem;
  --size: 2.5rem;
}
[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;
  --bgc: 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(--bgc);
  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 {
  --bgc: 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. */
  --bgc: 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 {
  background-color: var(--bgc);
  --bdc: var(--c);
  --bdrs: 0.25em;
  --bdw: var(--icon-bdw);
}
[data-css-icon*="bag"] i::before {
  --bdc: var(--c);
  --bdrs: 50%;
  --bdw: var(--icon-bdw);
  --befc: '';
  --h: var(--half);
  --pos: absolute;
  --t: calc((var(--size) / 2) - (var(--icon-size) * 0.75));
  --w: var(--half);
}
[data-css-icon*="bookmark"] i::after {
  --bgc: var(--c);
  --cpa: polygon(90% 0%,90% 70%,50% 100%,10% 70%,10% 0%);
}
[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 {
  --bgc: 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: '';
  --bgc: 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 {
  --bgc: 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 {
  --bgc: var(--c);
  --cpa: polygon(0% 5%,100% 5%,100% 70%,70% 70%,40% 100%,40% 70%,0% 70%);
}
[data-css-icon*="pause"] i::after {
  --bgc: 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*="play"] i::after {
  --bgc: var(--c);
  --cpa: polygon(16% 0%,15% 100%,100% 50%);
}
[data-css-icon*="refresh"] i::before {
  --befc: '';
  --bgc: 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;
  --bgc: 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 {
  --bgc: 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 {
  --bgc: var(--c);
}
[data-css-icon*="user"] i::after {
  --bgc: 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: '';
  --bgc: var(--c);
  --h: var(--half);
  --pos: absolute;
  --t: calc(var(--icon-size) * 0.75);
  --w: var(--half);
}

/* 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%;
  --bgc: 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.69231; /* Why that number? */
  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);
}
[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: 90%; 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(100% - 0.5rem); }
button, summary { 
  --sum-bgc: hsl(195, 10%, 98%);
  /*background-color: var(--sum-bgc);*/
  /*opacity: 0.9;*/
  /*border: 0;*/
  /*border-radius: 5px;*/
  /*color: var(--sum-c, inherit);*/
  color: white;
  font-weight: bold;
  /*border-bottom: 2px dotted #8d8d8d;*/
  font-family: inherit; font-size: inherit;
  list-style-type: none;
  margin: 0 10px;
  /*padding: 0 10px;*/
  /*outline: none;*/
  /*padding-bottom: 0.5rem;*/
  /*padding-top: 0.5rem;*/
  padding-inline-end: 0.5rem;
  padding-inline-start: 1rem;
  user-select: none;
  font-size: 15px!important;
}

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;
  }
}