/* Utility class for allowing a details element with class .over assigned to contain a child div that displays 'over' page content */

/* EXAMPLE:
<details class="over">
  <summary>Details</summary>
  <div>
    i will display over page content
  </div>
</details> 

*/

details[open]:has(details.over)>div {
  overflow-y: auto;
}

details.over {
  position: relative;


  &[open] {
    padding-bottom: 0;
    overflow: visible;
  }

  &[open]>summary {
    margin-bottom: 0;
  }

  >summary {
    position: relative;
  }

  >:not(summary) {
    position: absolute;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    width: 100%;
    z-index: calc(infinity);
    transform: translateY(100%);
    background: var(--bg, #ffffff);
    padding: 1ch;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
}