<style>
@layer a {
  .outer {
    background: red;
  }

  .inner {
    padding-top: 50px;
    top: inherit;
  }

  .hover {
    background: green;
  }
}

.inner {
  padding-top: revert-layer;
}
</style>
<div id=t class="outer">
  <div class="inner">
    This text should have padding above.
  </div>
</div>
<script>
document.body.offsetLeft;
t.classList.add('hover');
</script>