#knobsToggle{
  // main toggle button
  + .knobs > label{
    --size: calc(var(--toggleSize)/2);
    --offset: calc(var(--toggleOffset)); // takes the circular background (next element) into account
    position: absolute;
    width: var(--size);
    height: var(--size);
    top: var(--offset);
    right: var(--offset);
    padding: calc((var(--toggleSize) - var(--size))/2);
    font-size: 20px;
    line-height: 1;
    z-index: 1; // enough to make sure slider's output value is over the icon and not under
    color: var(--textColor);
  }

  &:not(:checked){
    + .knobs > label{
      &:hover{
        + .knobs__bg{
          opacity: 1;
          transform: scale(1.15);
        }
      }
    }
  }

  &:checked{
    + .knobs{
      // This is super-important.
      // "inline-block" is used so the content will only fill the minimum poissible size inside the body of the iframe,
      // but if the knobs are hidden, then this hinders the position of the toggler button.
      display: inline-block;

      > label{
        padding: 0;
      }

      .knobs__bg{
        --corner-radius: 8px;
        --offset: calc(var(--corner-radius) * -1);
        top: var(--offset);
        right: var(--offset);
        bottom: var(--offset);
        left: var(--offset);

        border-radius: var(--corner-radius);
        margin: 0;
        width: calc(100% + var(--corner-radius));
        height: calc(100% + var(--corner-radius));
        opacity: 1;
        transition: .3s cubic-bezier(.45, 0, .2, 1), margin .2s, border-radius .2s;
      }

      .knobs__labels {
        transform: none;
        transition: calc(var(--in-duration) * 1s) var(--in-easing);

        fieldset, .knobs__controls {
          transform: none;
          opacity: 1;
          transition: calc(var(--in-duration) * 1s) calc(var(--in-duration) * .5s) ease-out;
        }
      }
    }
  }
}

html, body{
  overflow: hidden;
}

.knobs {
  --background: hsla(var(--base-color), var(--base-color-l), var(--base-color-a));
  --opaqueColor-15: HSL(var(--base-color), calc(var(--base-color-l) + 15%));
  --range-track-color: var(--primaryColor);
  --knobs-gap: 3px;
  --side-pad: 12px;
  --toggleSize: 40px;
  --toggleOffset: 6px;
  --in-easing: cubic-bezier(.75,0,.35,1);
  --in-duration: .3;
  --color-size: 20px;
  --line-height: Max(0px, var(--color-size)); // units must be the same
  --knobs-group-transition: .33s cubic-bezier(.45, 0, .2, 1);
  --LTR-Bool: 1;  /* -1 for RTL */


  font: 12px/1 'Fira Sans Condensed', sans-serif;
  color: var(--textColor);
  position: relative;
 // position: fixed;
  overflow: hidden;

  &[data-flow='compact']{
    --color-size: 16px;

    label[data-type='range']{
      flex-flow: column;
      gap: var(--knobs-gap);
      padding-top: 6px;

      .range-slider{
        --thumb-size: 12px;
        --track-height: calc(var(--thumb-size)/2);
        width: 100%;
      }

      & ~ .knobs__knob__reset{
        // margin-bottom: calc(var(--knobs-gap, 6px) * 2);
        align-self: flex-start;
        margin-top: .5ch;
      }

      .knobs__label__text{
        margin: 0;
        padding: 0;
      }
    }
  }

  label {
    user-select: none;
    cursor: pointer;
  }

  &__bg{
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    margin: var(--toggleOffset);
    width: var(--toggleSize);
    height: var(--toggleSize);
    border-radius: 50%;
    background: var(--background);
    opacity: .8;
    backdrop-filter: blur(8px);
    transition:  120ms;
  }

  /* the <form> element which is the actual knobs wrapper */
  &__labels {
    //  background: var(--background);
    display: flex;
    flex-flow: column;
    max-height: 100%;
    border: var(--border);
    transform: translateX(calc(100.1% * var(--LTR-Bool)));

    fieldset {
      display: table;
      border: 0;
      padding: 0;
      margin: 0;
      opacity: 0;
      transform: translateX(calc(22% * var(--LTR-Bool)));

      // if only a single fieldset and it has a legend: disallow collapsing
      &:only-of-type{
        > label{
          pointer-events: none;
        }
      }

      &:first-child {
        // this allows the output of a range slider to be seen
        // on the first fieldset if it has no legend
        &:not([data-has-legend]){
          overflow: visible;
        }
      }
    }

    .fieldset__group{
      &[transition-done]{
        // needed for the hover tooltips (of range sliders)
        overflow: visible;
      }

      &__wrap{
        display: flex;
        flex-flow: column;
        gap: var(--knobs-gap);
        padding: var(--side-pad);
        transition: var(--knobs-group-transition);
      }
    }

    hr{
      border: 0;
      border-top: 1px solid var(--textColor);
      opacity: .25;

      &:last-of-type{
        margin-bottom: 0;
      }
    }

    label:not(.knobs__legend) {
      order: 5;
      flex: 1;
      display: flex;
      position: relative;
      z-index: 1;
      // background: var(--background);

      > * {
        // padding: var(--knobs-gap, 6px) 0;
      }
    }

    & .range-slider,
    & input[type=text]:not([size]),
    & input[type=number]:not([size]) {
      min-width: 200px;
    }

    & label:not(.knobs__legend) > :last-child {
      width: 100%;
      flex: 1;
      text-align: right;
      align-self: center;
    }
  }

  &__groups{
    flex: 1;
    margin-top: calc(var(--side-pad) * 2.5);
    overflow-y: scroll;
    scrollbar-width: none; // hides scrollbar (currently only in Firefox)

    &::-webkit-scrollbar {
      display: none;
    }

    > fieldset:first-child .knobs__knob:first-child .range-slider{
      --value-offset-y: 14px;
    }
  }

  &__legend{
    $lineGap: 2ch;

    display: flex;
    align-items: center;
    font-weight: 700;
    opacity: .66;
    line-height: 1.6;
    cursor: pointer;
    transition: .2s cubic-bezier(.45, 0, .2, 1);

    &[data-has-label]{
      gap: $lineGap;
      &:hover{
        gap: $lineGap * 2;
      }
    }

    &::before,
    &::after{
      content: '';
      height: 1px;
      background: var(--textColor);
      flex: 1;
      opacity: .5;
      transition: inherit;
    }

    &:hover{
      opacity: .85;
    }

    > div{
      display: flex;
      align-items: center;
      gap: $lineGap;
    }

    &__knobsCount{
      display: inline-block;
      border-radius: 50%;
      width: 1.5em;
      height: 1.5em;
      line-height: 1.6;
      font-size: .9em;
      text-align: center;
      overflow: hidden;
      position: relative;
      transition: var(--knobs-group-transition);

      &::before{
        background: var(--textColor);
        opacity: .3;
      }

      &:only-child{
        margin: 0 $lineGap;
      }
    }
  }

  .toggleSection{
    // visible knobs group
    &:checked{
      ~ .knobs__legend .knobs__legend__knobsCount{
        transform: scale(0);
        margin: 0;
        width: 0;
      }

      ~ .fieldset__group[transitioned]{
        overflow: hidden;
      }
    }

    // hidden knobs group
    &:not(:checked){
      ~ .knobs__legend{
        margin-bottom: 1em;
      }

      ~ .fieldset__group{
        overflow: hidden;

        .fieldset__group__wrap{
          opacity: 0;
          margin-top: calc(var(--height) * -1px);
          text-shadow: 0px 3px 2px;
        }
      }
    }
  }
}