$direction: ltr;

@import 'helpers/variables';
@import "helpers/mixins";
@import "helpers/direction";

//
// Counter
//
.qazana-piechart {
    position: relative;
    text-align: center;
  
    canvas {
      position: absolute;
      top: 0;
      left: 50%;
      z-index: 1;
      margin-bottom: 13px;
      max-width: 100%;
      transform: rotateY(180deg) translateX(50%);
    }
  
    &-counterclockwise-yes {
      canvas {
        transform: rotateY(0) translateX(-50%);
      }
    }
  
    &-title {
      color: #666666;
      text-align: center;
      font-weight: 400;
      font-size: 19px;
      line-height: 2.5;
    }
    &-subtitle {
      color: #666666;
      text-align: center;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.5;
    }
  
    &-number-progress {
      display: flex;
      align-items: center;
      justify-content: center;
      letter-spacing: -2px;
      font-size: 35px;
      &-prefix {
        flex-grow: 1;
        text-align: $end;
      }
  
      &-suffix {
        flex-grow: 1;
        text-align: $start;
        font-size: 70%;
      }
    }
  
    .piechart-number {
      position: relative;
      overflow: hidden;
      margin: 0 auto;
      margin-bottom: 22px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      line-height: 160px;
      &:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 1px solid grey;
        border-radius: inherit;
        content: '';
      }
  
       > * {
        line-height: inherit;
      }
    }
  }