.no-scroll {
  height: 100%;
  overflow: hidden;
}

.modal-container {
  @extend .grid-x,
  .align-center,
  .align-middle;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  position: fixed;
  z-index: 1000;

  &--hidden {
    visibility: hidden;
  }

  &--shown {
    visibility: visible;
  }

  &__overlay {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
  }

  &__content {
    background-color: $white;
    box-shadow: $modal-shadow;
    background-color: $modal-background-color;
    max-height: 95vh;
    max-width: 95vw;
    z-index: 9999;

    @include breakpoint(small only) {
      overflow: auto;
    }

    @media screen and (max-height: 600px) {
      overflow: auto;
    }

    &--normal-padding {
      @include breakpoint(small only) {
        display: flex;
        margin: 0;
        padding-top: 50px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 30px;
      }
    }

    &--overflow {
      overflow: auto;
    }

    &--normal-padding {
      max-height: 75vh;
      max-width: 95vw;

      @include breakpoint(small only) {
        padding-top: 50px;
        padding-left: 24px;
        padding-right: 24px;
        padding-bottom: 30px;
      }

      @include breakpoint(medium) {
        padding: $modal-padding;
      }
    }

    &--hidden {
      visibility: hidden;
    }

    &--semi-rounded {
      border-radius: 10px;
    }
  }

  &__go-back-button {
    position: absolute;
    top: 0px;
    left: 10px;
    font-size: 18px;
  }

  &__close-button {
    z-index: 1;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: $large-title-font-size-global;
  }

  &__wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  &__main-content {
    @include breakpoint(small only) {
      width: 100%;
      height: 100%;
    }
  }
}