@import "{design}/app"

$circleSize = 46px
$progressTextColor = #6fbde2

.radialProgress
  height: $circleSize
  width: $circleSize
  box-shadow: 0 0 1em black
  border-radius: 100%
  position: relative

  #svg circle
    stroke-dashoffset: 0
    transition: stroke-dashoffset 1s linear
    stroke: #203244
    stroke-width: 3px

  #svg #bar
    stroke: $activeColor
    -ms-transform: rotate(270deg) /* IE 9 */
    -ms-transform-origin: center center /* IE 9 */
    -webkit-transform: rotate(270deg) /* Chrome, Safari, Opera */
    -webkit-transform-origin: center center /* Chrome, Safari, Opera */
    transform: rotate(270deg)
    transform-origin: center center

  .progressText
    position: absolute
    width: $circleSize
    height: $circleSize
    line-height: $circleSize
    font-family: Roboto
    font-weight: 700
    font-size: 17px
    text-align: center
    color: $progressTextColor
    top: 0

    svg
      width: 17px
      height: 17px