@import "{ohif:design}/app"

#viewer
  background-color: black
  height: 100%
  width: 100%

#imageViewerViewports
  .viewportContainer
    border: none !important
    outline: 0 !important // Prevent blue outline in Chrome

    &:hover
    &.active
    &:hover.active
      border: none !important
      outline: 0 !important // Prevent blue outline in Chrome

    .removable
      .imageViewerViewport
        theme('border-bottom', '%s solid $uiBorderColor' % $uiBorderThickness)
        
        canvas
          border-color: transparent
          border-style: solid
          border-width: 1px

    &:not(:last-child)
    .removable
      .imageViewerViewport
        theme('border-right', '%s solid $uiBorderColor' % $uiBorderThickness)
    
    &:first-child
      .removable
        .imageViewerViewport
          theme('border-left', '%s solid $uiBorderColor' % $uiBorderThickness)
        
    &.active
      .removable
        .imageViewerViewport
          border-right: none !important
          
          canvas
            theme('border-color', '$uiBorderColorActive')


.sidebar-left-open
  #layoutManagerTarget
    #imageViewerViewports
      .viewportContainer
        &:first-child
          .removable
            .imageViewerViewport
              border-left: none