andela/workdey

@mixin circle($size) {
  content: "";
  position: absolute;
  border-radius: 50%;
  left: calc(50% - #{$size/2});
  top: calc(50% - #{$size/2});
  width: $size;
  height: $size;
}
.meter-header{
  margin-top: 10%;
  a{
    color: gray;
    &:hover{
      color:#eb4D5c
    }
}
}
.profile-meter {
  float: right;
  margin-top: 15%;
}

$size: 120px;
.progress-pie-chart {
  width: $size;
  height: $size;
  border-radius: 50%;
  background-color: #E5E5E5;
  position: relative;
  &.gt-50 {
    background-color: #FFA500;
  }
  &.gt-80 {
    background-color: #81CE97;
  }
}
.ppc-progress {
  @include circle($size);
  clip: rect(0, $size, $size, #{$size/2});
  .ppc-progress-fill {
    @include circle($size);
    clip: rect(0, #{$size/2}, $size, 0);
    background: #eb4D5c;
    transform: rotate(60deg);
  }
  .gt-50 & {
    clip: rect(0, #{$size/2}, $size, 0);
    .ppc-progress-fill {
      clip: rect(0, $size, $size, #{$size/2});
      background: #E5E5E5;
    }
  }
  .gt-80 & {
    clip: rect(0, #{$size/2}, $size, 0);
    .ppc-progress-fill {
      clip: rect(0, $size, $size, #{$size/2});
      background: #E5E5E5;
    }
  }
}
.ppc-percents {
  @include circle(#{$size/1.15});
  background: #fff;
  text-align: center;
  display: table;
  span {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #eb4D5c;
  }
}
.pcc-percents-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.gp-50 {
  color: #FFA500 !important;
}

.gp-80 {
  color: #81CE97 !important;
}


.progress-pie-chart {
  margin: 50px auto 0;
}