/* Lock page scroll while a modal is open */
html.modalOpen {
  overflow: hidden;
}

.modal {
  position: fixed;
  z-index: calc(var(--arrangeFront) + 9);
  top: 0px;
  left: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  &[hidden] {
    display: none;
  }

  .modalOverlay {
    position: absolute;
    z-index: var(--arrangeBack);
    inset: 0;
    background-color: rgb(0 0 0 / 0.8);
  }

  .modalInnerWrapper {
    position: relative;
    z-index: var(--arrangeFront);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    width: min(1100px, 90vw);
    max-height: 90vh;

    .modalHeader {
      position: absolute;
      bottom: 100%;
      right: 0;
      padding-bottom: 10px;

      .modalClose {
        display: flex;
        padding: 0;
        border: 0;
        background: none;
        cursor: pointer;
      }
    }

    .modalContent {
      overflow-y: auto;

      .content {
        padding: 40px;
      }

      .embed {
        aspect-ratio: 16 / 9;

        iframe {
          display: block;
          width: 100%;
          height: 100%;
          border: 0;
        }
      }

      video {
        display: block;
        width: 100%;
      }
    }
  }
}