phun-ky

.if.button:focus,
.if.button.is-focused {
  outline: 4px solid #0054f0;
}
[data-whatintent='mouse'] {
  .if.button:focus,
  .if.button.is-focused {
    outline: none;
  }
}

phun-ky

/*
 * Usage:
 * 
 *    whatinput(el) // Where el is ither document.documentElement(default) or the element you want to 
 *                  // add whatinput attributes to.
 */

const whatinput=e=>{const t=e||document.documentElement;e||(e=window);let n=null,o="initial",s=o,r=Date.now();const i=["button","input","select","textarea"];let a=[16,17,18,91,93],d=[];const u={keydown:"keyboard",keyup:"keyboard",mousedown:"mouse",mousemove:"mouse",MSPointerDown:"pointer",MSPointerMove:"pointer",pointerdown:"pointer",pointermove:"pointer",touchstart:"touch",touchend:"touch"};let c=!1;const l={x:null,y:null},p={2:"touch",3:"touch",4:"mouse"};let m=!1;try{const t=Object.defineProperty({},"passive",{get:()=>m=!0});e.addEventListener("test",null,t)}catch(e){}const w=()=>{const t=!!m&&{passive:!0};window.PointerEvent?(e.addEventListener("pointerdown",h),e.addEventListener("pointermove",y)):window.MSPointerEvent?(e.addEventListener("MSPointerDown",h),e.addEventListener("MSPointerMove",y)):(e.addEventListener("mousedown",h),e

phun-ky

:root {
  --color-white: #FFFFFF;
  --color-black-stallion: #0A1C1B;
  --color-sci-fi-petrol: #006666;
  --color-aquatic-green: #499A9A;
  --container-padding: 2em;
  --size-unit: 16;
  /* body font-size in design - no px */
  --size-container-ideal: 1440;
  /* screen-size in design - no px */