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

.block-type-webscene,
.background-type-webscene {

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

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

  .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
   */

  .esri-ui-bottom-right {
    margin-right: -7px;
  }

  .interaction-container {
    bottom: 23px;
  }

  &.interaction-button:not(.builder-config-open) .esri-ui-bottom-right {
    bottom: 35px;
  }

  &.interaction-disabled,
  &.interaction-button:not(.interaction-enabled) {
    .scene .esri-compass,
    .scene .esri-zoom {
      display: none;
    }
  }

  &.builder-config-open {
    .scene .esri-compass,
    .scene .esri-zoom {
      display: inherit !important;
    }
  }
}

.background-type-webscene {
  .scene {
    width: 100%;
    height: 100%;
  }
}

/*
 * Customization
 */

.scene .esri-ui-bottom-right {
  flex-direction: column;
}

.scene .esri-compass {
  margin-bottom: 15px;
}
