@include pageflow-page-type(linkmap_page);

@import "./linkmap_page/animations/rotate";

@mixin inline-loading-spinner {
  left: 50%;
  @include transform-origin(center left);
  @include animation(linkmap_page_rotate 0.5s linear infinite);
  display: none;

  .circle_inner {
    left: auto;
    right: 100%;
    @include transform-origin(center right);
    @include transform(rotate(-120deg));
  }
}

.js .page .scroller > div.linkmap {
  padding: 0 !important;
  width: auto;
  height: auto;

}
.linkmap_page {
  @import "./linkmap_page/audio_player_controls";

  @include user-select(none);

  .page_background {
    background: #000;
  }

  .content {
    pointer-events: none;
  }

  .scroller {
    overflow: hidden;

    > div {
      min-height: 0;
    }

    .emulation_mode_phone & {
      margin-right: 0 !important;
    }
  }

  .linkmap {
    position: absolute;
    height: 100%;
    width: 100%;
    left:0;

    &.moving_background {
      @include transition(none);
    }

    &.measuring {
      @include transition(none);
    }
  }

  .panorama_wrapper {
    position: absolute;
    @include transition(transform 0.3s ease);
    @include transform-origin(0 0);
  }

  .linkmap_areas {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .controls:before {
    display: none;
  }

  .panorama {
    height: 120%;
    width: auto;
    vertical-align: middle;
    position: relative;
    display: none;

    &.active {
      display: block;
    }
  }

  .hover_video {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    overflow: hidden;
    @include transition(opacity 0.2s, visibility 0.2s);

    .panorama_video {
      display: block;
    }

    &.playing {
      visibility: visible;
      opacity: 1;
    }
  }

  .vjs-loading-spinner,
  .vjs-control-bar {
    display: none !important;
  }

  .arrow_left,
  .arrow_right {
    display: none;
  }

  .hover_area {
    position: absolute;
    top: 50%;
    left: 10%;
    height: 30%;
    width: 20%;
    overflow: hidden;
    display: block;
    pointer-events: none;

    &.enabled {
      pointer-events: all;
    }

    .hover_image,
    .visited_image {
      position: absolute;
      top: 0;
      left: 0;
      visibility: hidden;
      opacity: 0;
      @include transition(opacity 0.5s ease, visibility 0.5s ease);
    }

    &.hover,
    &.playing,
    &:focus,
    &.editing {
      .hover_image {
        z-index: 1;
        opacity: 1;
        visibility: visible;
      }
    }

    &.visited {
      .visited_image {
        opacity: 1;
        visibility: visible;
      }
    }

    .panorama_video {
      position: absolute;
      display: block;
      z-index: 1;
    }

    .linkmap_marker {
      position: absolute;
      z-index: 2;
    }

    &.dynamic_marker {
      .linkmap_marker {
        background-color: transparent;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        box-sizing: border-box;
        border-radius: 50%;
        @include transition(0.15s);
        opacity: 0.1;
      }

      &.hover,
      &.playing,
      &:focus,
      &:active {
        .linkmap_marker {
          opacity: 1 !important;
        }
      }
    }
    &:focus, &:active {
      outline: none;
      border: none;
    }
  }
  .description_overlay {
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    max-width: 510px;
    max-height: 400px;

    .description_overlay_wrapper {
      overflow: hidden;
      position: relative;
    }

    @include transition(opacity 0.15s);

    &.active {
      opacity: 1;
    }

    .link_title {
      font-size: 28px;
      color: #55AEBC;
      letter-spacing: 0.31px;
      line-height: 46px;
    }

    .link_description {
      font-size: 20px;
      color: #999999;
      letter-spacing: 0.22px;
      line-height: 30px;
    }
  }

  &.hide_overlay_boxes {
    .description_overlay {
      display: none;
    }
  }

  .external_link_loading_indicator,
  .external_site_area .inline_loading_spinner {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;
    overflow: hidden;

    .circle_inner {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      overflow: hidden;
      @include transform(rotate(0));

      .circle_innerst {
        position: absolute;
        height: 100%;
        width: 200%;
        top: 0;
        left: 0;
        box-sizing: border-box;
        border-radius: 50%;
      }
    }

    @include inline-loading-spinner;
  }

  .external_site_area.active.target_self.dynamic_marker .inline_loading_spinner {
    display: block;
  }

  .external_link_loading_indicator {
    height: 150px;
    width: 75px;
    margin-top: -75px;
    z-index: 2;
  }
}