.OverlayContainer {
  position: fixed;
  z-index: var(--layer-z-index-overlay);
  inset: 0;

  width: 100%;
  height: 100%;

  &:where(.hidden) {
    pointer-events: none;
  }
}

.OverlayWrapper {
  position: relative;
  z-index: var(--layer-z-index-base);
  width: 100%;
  height: 100%;
}

.Overlay {
  position: absolute;

  &:where(.hidden) {
    opacity: 0;
  }

  &:where(.transition) {
    transition:
      top var(--motion-transition-fast),
      opacity var(--motion-transition-fast);
  }
}