-var hexes = ["f", "e", "d", "c", "b", "a", "9", "8", "7", "6", "5", "4", "3", "2", "1", "0"]

.hexplorer
  .input
  .output
    .output__hex
    .output__valuesets
      - for (var x = 1; x < 7; x++)
        div(class="valueset valueset--"+x)
            each hex in hexes
              span(class="value value--"+hex)= hex

:root {
  --r: 255;
  --g: 255; 
  --b: 255;
}  
body{
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  font-family: "DM Mono", monospace;
  text-transform: uppercase;
  font-weight: 100;
}

.hexplorer {
  display: flex;
  justify-content: center;
}

.input {
  margin-right: 2.5em;
}

.output__hex,
.output__valuesets{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 22px;
}

.output__hex {
  span {
    font-size: 72px;
    font-weight: 400;
    padding: 2px 5px;
    color: rgba(0,0,0,1);
    &:nth-child(1) {
      font-weight: 100;
      color: rgba(0,0,0,.15);
    }
    &:nth-child(2),
    &:nth-child(3) {
      color: rgb(var(--r),0,0);    
    }
    &:nth-child(4),
    &:nth-child(5) {
      color: rgb(0,var(--g),0);    
    }
    &:nth-child(6),
    &:nth-child(7) {
      color: rgb(0,0,var(--b));    
    }
  }
}

.valueset {
  display: flex;
  flex-direction: column;
  &:nth-child(1) {
    grid-column: 2;
  }
  span {
    text-align: center;
    padding: 2px;
    color: rgba(0,0,0,.25);
    transition: all 150ms ease-out;
    &.is--active {
      font-weight: 400;
      color: rgba(0,0,0,1);
      transform: scale(2);
    }
  }
}

// Awesome color picker from iro.js
// https://iro.js.org

var colorPicker = new iro.ColorPicker(".input", {
  width: 230,
  color: "rgb(255, 200, 255)"
});

const root = document.documentElement;
const hexCode = document.querySelector(".output__hex");
const hexValueset = document.querySelectorAll(".valueset");
const hexValues = document.querySelectorAll(".value");

//When new color is picked...
colorPicker.on(["color:init", "color:change"], function(color){
  let val = color.hexString;  
  // Assign color values to css variables
  root.style.setProperty('--r', color.rgb.r);
  root.style.setProperty('--g', color.rgb.g);
  root.style.setProperty('--b', color.rgb.b);
  root.style.setProperty('--color', val);
  
  // Remove hashtag from hexcode
  let hexChars = val.substring(1).split('')
  
  // Remove old hexcode
  hexCode.innerHTML = "";
  
  // Remove all old active classes
  for (var i = 0; i < hexValues.length; i++) {
    hexValues[i].classList.remove("is--active");
  }
  hexChars.forEach(printHex);
  // Add new active classes
  hexChars.forEach(getCharacter)
  
  // Add hashtag back to hexcode
  hexCode.insertAdjacentHTML("afterbegin", "<span>#</span>");
});

function printHex(item, index, array){
  hexCode.innerHTML += "<span>" + item + "</span>";
}

// Match hex code values to currently selected color
function getCharacter(item, index, array){
  let set = hexValueset[index];
  let value = set.querySelector(".value--"+item);
  value.classList.add("is--active");
}