@utility stack {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;

  &::before,
  &::after,
  > *,
  > *:where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    position: relative;
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }

  > *,
  > *:where(.contents) > *,
  > *:where(astro-island, astro-slot) > * {
    z-index: 1;
  }

  > :where(.background) {
    overflow: hidden;
    position: absolute;
    inset: 0;
  }

  > :where(.foreground) {
    position: relative;
    z-index: 10;
  }
}

@utility stack-interactive {
  @apply stack;

  > *:where(.underlay) {
    z-index: -1;
  }

  > *:where(.overlay) {
    pointer-events: none;
    z-index: 10;
  }

  > *:where(.underlay),
  > *:where(.overlay) {
    @apply pos-overlay;
    opacity: 0;
    transition: var(--transition-values);
    transition-property: opacity;
  }

  > *:where(.fade-out) {
    opacity: 1;
    transition: var(--transition-values);
    transition-property: opacity;
  }

  @variant interact-within {
    > *:where(.underlay),
    > *:where(.overlay) {
      pointer-events: auto;
      opacity: 1;
    }

    > *:where(.fade-out) {
      opacity: 0;
    }
  }
}