.overlay-modal {
  position: fixed;
  appearance: auto;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  top: 0;

  z-index: 3000;
  background-color: var(--background-base, #fff);
  overflow: hidden;
}

.overlay-modal__body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-modal__frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.overlay-modal__loading {
  font-size: var(--font-size-lg, 1.25rem);
  color: var(--text-neutral);
}

.overlay-modal__error {
  color: var(--text-negative, red);
  padding: var(--padding-md, 1rem);
}

.overlay-close {
  position: fixed;
  background-color: var(--background-neutral);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--size-2-5);
  top: var(--size-8);
  right: var(--size-8);
  transform: rotate(0deg);
  transition:
    transform 0.25s ease-in,
    top 0.25s ease-in;
  cursor: pointer;

  &:hover {
    transform: rotate(180deg);
  }

  &:focus-visible {
    outline-offset: 2px;
  }

  svg {
    width: var(--size-6);
    height: var(--size-6);
    color: var(--text-neutral);
  }
}

/* Make room for the pinned mobile side-nav bar inside the overlay page */
.overlay-modal.has-stuck-side-nav .overlay-close {
  top: calc(var(--size-8) + var(--overlay-close-side-nav-offset, var(--size-8)));
}

@media (prefers-reduced-motion: reduce) {
  .overlay-close {
    transition: none;

    &:hover {
      transform: none;
    }
  }
}