@import "{ohif:design}/app"

.thumbnailEntry.active .imageThumbnail
  theme('border-color', '$activeColor')
  box-shadow: none
  transition($sidebarTransition)

.imageThumbnail
  theme('box-shadow', 'inset 0 0 0 1px $uiBorderColorDark')
  theme('background-color', '$primaryBackgroundColor')
  border: 5px solid transparent
  border-radius: 12px
  height: 135px
  margin: 0 auto
  padding 1px 7px
  position: relative
  transition($sidebarTransition)
  width: 217px
  -moz-background-clip: padding
  -webkit-background-clip: padding
  background-clip: padding-box

.imageThumbnailClone
  margin: 0 !important

  &:hover
    theme('border-color', '$hoverColor')
    box-shadow: none

.imageThumbnailCanvas
  height: 100%
  overflow: hidden

  img
    -webkit-user-drag: none

.thumbnailLoadingIndicator
  display: none
  pointer-events: none
  theme('color', '$textSecondaryColor')
  height: 20px
  width: 100%
  top: 0
  left: 0
  right: 0
  bottom: 0
  margin: auto
  position: absolute

  &.d-block
    display: block;

  p
    text-align: center
    font-size: 10pt

.imageThumbnailProgressBar
  position: relative
  width: 100%
  height: 3px
  top: -5px

  .imageThumbnailProgressBarInner
    height: 100%
    width: 0
    border-radius: 5px
    theme('background-color', '$activeColor')
