@property --progress {

  syntax: '<integer>';

  inherits: true;

  initial-value: 0;

}



@keyframes load {

  to {

    --progress: var(--value)

  }

}



.rkit-progress {

  --value: 17;

  --progress-color: #00cea6;

  --secondary-progress-color: #e3efff;

}



.progress-bar-container{

  display: flex;

  flex-direction: column;

  width: 100%;

}



.rkit-progress-animation,

.rkit-progress-animation::after {

  animation: load;

  animation-fill-mode: forwards;

  animation-duration: calc(var(--animation-duration) * 1ms);

  animation-timing-function: linear;

  animation-delay: 500ms;

}



.circular-progress {

  position: relative;

  width: 12rem;

  aspect-ratio: 1/1;

  border-radius: 50%;

  background: conic-gradient(var(--progress-color) calc(var(--progress) * 3.6deg), var(--secondary-progress-color) 0deg);

  display: flex;

  justify-content: center;

  align-items: center;

}



.circular-progress .progress-value {

  background-color: #d6d6d6;

  position: absolute;

  width: 85%;

  aspect-ratio: 1/1;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 20px;

  flex-direction: column-reverse;

}



.percentage-label::after,

.progress-bar-inline .percentage-label::after {

  counter-reset: percentage var(--progress);

  content: counter(percentage) '%';

}

.progress-bar-container .progress-bar-inline .progress-value,

.progress-bar-inline.percentage-label::after{

  font-size: 1rem;

}



.circular-progress .progress-value::before {

  content: var(--title);

}



.progress-bar,

.progress-bar-inline {

  position: relative;

  width: 100%;

  height: 10px;

  background-color: var(--secondary-progress-color);

  display: flex;

  border-radius: 50px;

}



.progress-bar-inline .progress-value::before {

  height: 100%;

  display: flex;

  align-items: center;

  content: var(--title);

}





.progress-bar .progress-value,

.progress-bar-inline .progress-value

 {

  height: 100%;

  width: calc(var(--progress) * 1%);

  background-color: var(--progress-color);

  position: relative;

  border-radius: 50px;

}



.progress-bar.percentage-label::after

 {

  display: inline-block;

  position: absolute;

  left: calc(var(--progress) * 1% - 2rem)

}



.progress-bar-inline.percentage-label::after{

  display: flex;

  justify-content: end;

  align-items: center;

  position: absolute;

}

.progress-bar-inline{

  position: relative;

}



.progress-bar-inline.percentage-label::after{

  right:20px ;

  left: 80%;

  bottom: 0;

  top: 0;

  display: flex;

  align-items: center;

}



.half-circular-progress {

  position: relative;

  width: 12rem;

  aspect-ratio: 2/1;

  border-radius: 50% / 100% 100% 0 0;

  background: conic-gradient(from 0.75turn at 50% 100%, var(--progress-color) calc(var(--progress) * 3.6deg / 2), var(--secondary-progress-color) 0deg);

  display: flex;

  justify-content: center;

  align-items: center;

}



.half-circular-progress .progress-value {

  background-color: #d6d6d6;

  position: absolute;

  width: 75%;

  aspect-ratio: 2/1;

  border-radius: 50% / 100% 100% 0 0;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 20px;

  flex-direction: column-reverse;

  bottom: 0;

}



.half-circular-progress .progress-value::before {

  content: var(--title);

}



.prefix-postfix {

  width: 12rem;

  display: flex;

  justify-content: space-between

}



.progress-title {

  padding-block: 0.5rem;

  display: block;

}