.color-picker{
  h1{
    margin: 0 0 .5em;
    font-size: 1em;
    text-align: center;
  }
  &.hidden{
    opacity: 0;
    pointer-events: none;
  }
}

.color-picker[positioned]{
  --x: calc(var(--pos-left) + var(--window-scroll-x));
  --y: calc(var(--pos-top) + var(--window-scroll-y));
  position: absolute;
  z-index: 9999991;
  border-radius: 10px;
  padding: .5em;
  box-shadow: 0 5px 20px #00000044;
  backdrop-filter: blur(3px);
  background: white;
  top: 0;
  left: 0;
  transform: translate(calc(var(--x) * 1px),
                      calc(var(--y) * 1px));

  @media only screen and (max-device-width : 640px) {
    max-width: 70%;
  }

  &:not(.hidden) ~ .knobsIframe{
    pointer-events: none;
    filter: blur(2px);
  }
}