@import "{ohif:design}/app"

$viewportTagPadding = 20px

.imageViewerViewport.empty ~ .ViewportOverlay
  display: none

.ViewportOverlay
  theme('color', '$textSecondaryColor')

  .overlay-element
    position: absolute
    font-weight: 400
    text-shadow: 1px 1px black
    pointer-events: none

  .top-left
    top: $viewportTagPadding
    left: $viewportTagPadding

  .top-center
    top: $viewportTagPadding
    padding-top: $viewportTagPadding
    width: 100%
    text-align: center

  .top-right
    top: $viewportTagPadding
    right: $viewportTagPadding
    text-align: right

  .bottom-left
    bottom: $viewportTagPadding
    left: $viewportTagPadding

  .bottom-right
    bottom: $viewportTagPadding
    right: $viewportTagPadding
    text-align: right

  &.controlsVisible
    .topright, .bottomright
      right: "calc(%s + 19px)" % $viewportTagPadding

  svg
    theme('color', '$defaultColor')
    theme('fill', '$defaultColor')
    theme('stroke', '$defaultColor')
    background-color: transparent
    margin: 2px
    width: 18px
    height: 18px