@require '{ohif:design}/app'

$circleSize = 26px

.radialProgress
  border-radius: 100%
  height: $circleSize
  margin-top: 3px
  margin-right: 4px
  position: relative
  vendorize(box-shadow, 0 0 1em black)
  width: $circleSize

  #svg circle
    stroke-dashoffset: 0
    theme('stroke', '$uiBorderColorDark')
    stroke-width: 3px
    vendorize(transition, stroke-dashoffset 1s linear)

  #svg #bar
    theme('stroke', '$textSecondaryColor')
    vendorize(transform, rotate(270deg))
    vendorize(transform-origin, center center)

  .progressArea
    theme('color', '$textSecondaryColor')
    display: table
    font-weight: 700
    font-size: 12px
    height: $circleSize
    line-height: $circleSize
    left: 50%
    position: absolute
    text-align: center
    top: 50%
    transform(translate(-50%, -50%))
    width: $circleSize

    &.locked
      line-height: 0

      &, & svg
        height: 12px
        width: 10px

    &.complete
      line-height: 0

      &, & svg
        height: 16px
        width: 16px

    svg
      theme('fill', '$textSecondaryColor')
      theme('stroke', '$textSecondaryColor')