#modal, #nested_modal {
  .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .content {
    position: fixed;
    top: 25vh;
    left: 50%;

    padding: var(--golden-xl);
    padding-bottom: calc(2*var(--golden-xxl));
    box-shadow:
      var(--golden-m)
      var(--golden-m)
      var(--golden-m)
      rgba(0, 0, 0, 0.3);

    transform: translate(-50%, -50%);
    background: var(--white);
    width: 80%;
    max-height: 80vh;
    max-width: 500px;
    z-index: 2;
    overflow-y: scroll;

    .primary-button {
      position: absolute;
      bottom: var(--golden-xl);
      left: var(--golden-xl);
    }

    h1 {
      font-size: var(--golden-xl);
    }

    .close-button {
      position: absolute;
      bottom: var(--golden-xl);
      right: var(--golden-xl);
    }
  }
}

#nested_modal {
  .background {
    background: rgba(0, 0, 0, 0.2);
    z-index: 3;
  }
  .content {
    max-width: 400px;
    z-index: 4;
  }
}