.pix-overlay {
  position: fixed;
  z-index: 1000;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  background-color: rgba(var(--pix-neutral-800-inline), 0);
  border: none;
  transition:
    background-color 0.3s ease-out,
    display 0.3s allow-discrete,
    overlay 0.3s allow-discrete;
  inset: 0;

  &::backdrop {
    background-color: transparent;
  }

  &[open] {
    background-color: rgba(var(--pix-neutral-800-inline), 0.4);
  }

  &--with-centered-content {
    align-items: center;
    padding-block: var(--pix-spacing-4x);

    &[open] {
      display: grid;
    }
  }

  @starting-style {
    &[open] {
      background-color: rgba(var(--pix-neutral-800-inline), 0);
    }
  }
}

.pix-overlay-scroll-lock {
  overflow: hidden;
}