index.html

<div block>
  <div>
    <div block>
      <div>
        <div block>
          <div>
            <div>
              <div block>
                <div>
                  <div block>
                    <div></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

levels.css

:root {
  --woly-component-level: 7;
  --woly-main-level: 5;
  --woly-border-width: 1px;
  --woly-const-m: 6px;
}

div {
  padding: calc(1px * var(--woly-component-level) * var(--woly-main-level) - var(--woly-border-width));
  background-color: rgba(0,0,255,0.2);
}

div::after {
  counter-reset: variable var(--woly-component-level);
  content: counter(variable);
}

[block] {
  --temp-level: max(calc(var(--woly-component-level) - 1), 0);
}

[block] > * {
  --woly-component-level: var(--temp-level);
}

[block] > [block] {
  background-color: red;
}

[block] > [block]:after {
  content: "INVALID!!!!"
}

[set-root] {
  --woly-component-level: var(--override, 5);
}