@import "{design}/app"

.viewerMain
  width: 100%
  height: 100%

  #layoutManagerTarget
    width: 100%
    height: 100%
    transition(all 0.3s ease)

    #imageViewerViewports
      .viewportContainer
        float: left
        border: $viewportBorderThickness solid $viewportBorderColor

        outline: 0 // Prevent blue outline in Chrome

        &:hover
        &.active
        &:hover.active
          outline: 0 // Prevent blue outline in Chrome

        &:hover
          border: $viewportBorderThickness solid $viewportBorderColorHover
          
        &.active, &:hover.active
          border: $viewportBorderThickness solid $viewportBorderColorActive

        .removable
          width: 100%
          height: 100%
          position: relative // Necessary so that the viewportOverlay is on top of the viewports