.RadialProgress {
    --hue: 40;
    --holesize: 45%;
    --track-bg: rgb(36, 2, 39);
    
    block-size: 70px;
    inline-size: 70px;
    min-inline-size: 70px;
    min-block-size: 70px;
    display: grid;
    place-items: center;
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: white;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 50%;
      z-index: -1;
      background: conic-gradient(
        hsl(var(--hue) 100% 35%),
        hsl(var(--hue) 100% 70%),
        hsl(var(--hue) 100% 25%) var(--progress, 0%),
        var(--track-bg) var(--progress, 0%) 100%
      );
      
      mask-image: radial-gradient(
        transparent var(--holesize),
        black calc(var(--holesize) + 0.5px)
      );

      -webkit-mask-image: radial-gradient(
        transparent var(--holesize),
        black calc(var(--holesize) + 0.5px)
      );
    }
  }