/*
 * Simple aspect ratio for the media height
 */

body.mobile-view.touch {
  .block-webpage {
    &, .block-media-wrapper, figure {
      overflow-y: hidden;
    }
    &.interaction-enabled {
      &, .block-media-wrapper, figure {
        overflow-y: auto;
      }
      .block-media-wrapper {
        min-height: 50vh;
      }
      figure {
        -webkit-overflow-scrolling: touch;
      }
    }
  }
  .interaction-container {
    bottom: 2em;
  }
}

.block-webpage {
  position: relative;

  .webpage {
    width: 100%;
    height: 100%;
  }

  .block-media {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
  }

  .block-media-wrapper {
    padding-top: 50%;
    position: relative;
  }

  &.block-size-small .block-media-wrapper {
    padding-top: 30%;
  }

  &.block-size-large .block-media-wrapper {
    padding-top: calc(~"100vh - 120px");
  }

  .interaction-container {
    bottom: 5px;
    right: 20px;
  }
}

.background-type-webpage {
  width: 100%;
  height: 100%;

  .media-loading {
    z-index: -1;
  }

  .webpage-container {
    width: 100%;
    height: 100%;
  }

  .webpage {
    width: 100%;
    height: 100%;
  }
}

.scroll-off:not(.interaction-button) .webpage {
  pointer-events: none;
}

body.mobile-view .block-webpage.block-size-small .block-media-wrapper {
  padding-top: 50%;
}
