[PC/MO] Pie Chart

$pieBg: #ddd;
$piePoint: #fc595d;

.pie-chart {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: $pieBg;
 }
 
.pie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  &.less {
    clip: rect(0px, 80px, 80px, 40px);
  }
  &.more {
    clip: rect(0, 80px, 80px, 0);
  }
}

.pie-piece {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: $piePoint;
  clip: rect(0px, 80px, 80px, 40px);
  @at-root .less &.right {
    display: none;
  }
  @at-root .more &.right {
    display: block;
  }
}
  
.percentage {
  background: #fff;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: $piePoint;
  font-size: 20px;
 }
 
.unit {
  font-size: 16px;
}

<div class="pie-chart">
  <div class="pie less"> <!-- if percentage <= 50% -->  
    <!-- rotate: -180 + ( 3.6 * percentage ) -->
    <div class="pie-piece" style="transform:rotate( -108deg )"></div> 
    <div class="pie-piece right"></div>
  </div>
  <div class="percentage">
     20<span class="unit">%</span>
  </div>
</div>

<hr />

<div class="pie-chart">
  <div class="pie more"> <!-- 51% <= percentage < 100& -->  
    <!-- rotate: 3.6 * (percentage - 50 ) -->
    <div class="pie-piece" style="transform:rotate( 144.0deg )"></div> 
    <div class="pie-piece right"></div>
  </div>
  <div class="percentage">
     90<span class="unit">%</span>
  </div>
</div>