@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-Bold;
    font-size: 17px;
    text-align: center;
    color: $progressTextColor;
    top: 0;

    svg
      width: 17px
      height: 17px