body.disable-bg-scroll {
  overflow: hidden;
}

.modal-overlay {
  --bg: rgba(0, 0, 0, 0.5);

  display: none;

  &.modal-open {
    background: var(--bg);

    bottom: 0;
    display: block;
    left: 0;
    overflow: scroll;
    position: fixed;
    right: 0;
    top: 0;
  }
}

.modal {
  --bg: #fff;
  --mb: 2rem;
  --ml: 2rem;
  --mr: 2rem;
  --mt: 2rem;
  --pb: 2rem;
  --pl: 2rem;
  --pr: 2rem;
  --pt: 2rem;

  background-color: var(--bg);

  margin-bottom: var(--mb);
  margin-left: var(--ml);
  margin-right: var(--mr);
  margin-top: var(--mt);
  padding-bottom: var(--pb);
  padding-left: var(--pl);
  padding-right: var(--pr);
  padding-top: var(--pt);
  position: relative;

  &.modal-centerh {
    left: calc(50% - var(--ml));
    transform: translateX(-50%);
  }

  &.modal-centerv {
    top: calc(50% - var(--mt));
    transform: translateY(-50%);
  }

  &.modal-centerh.modal-centerv {
    transform: translate(-50%, -50%);
  }

  &.modal-full {
    margin: 0;
    min-height: 100vh;
    width: 100vw;
  }

  .modal-content {
    --upper-txt-spacing: 2rem;

    .modal-h {
      display: inline-block;
      margin-bottom: var(--upper-txt-spacing);

      &:last-child {
        margin-bottom: 0;
      }
    }

    p {
      &:first-child {
        margin-top: var(--upper-txt-spacing);
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .modal-close {
    --bottom: auto;
    --font-weight: bold;
    --left: auto;
    --right: 2rem;
    --top: 1.8rem;

    cursor: pointer;
    font-weight: var(--font-weight);

    bottom: var(--bottom);
    left: var(--left);
    position: absolute;
    right: var(--right);
    top: var(--top);
  }
}