@import '~tc-ui/src/styles/tc-includes';

:global {
  .ProgressBar {
    .progress-box {
      position: absolute;
      width: 400px;
      margin: auto;
  
      .checkpoint-line {
        display: block;
        margin-bottom: 5px;
        height: 20px;
  
        .checkpoint-text {
          position: absolute;
          float: left;
          font-family: "Roboto", Arial, Helvetica, sans-serif;
          font-weight: 500;
          font-size: 13px;
          line-height: 15px;
          color: white;
        }
      }
      .progress-ui {
        width: 80%;
        position: relative;
        height: 8px;
  
        .progress-line {
          top:0px;
          position: absolute;
          height: 4px;
          width: 100%;
          background-color: $tc-gray-20;
          display: inline-block;
         }
  
         .completion-line {
           top:0px;
           left:0px;
           position: absolute;
           height: 4px;
           background-color: $tc-dark-blue-70;
           display: inline-block;
           border-right: 4px solid $tc-gray-80;
         }
  
         .progress-circles  {
           width: 100%;
           top:-5px;
           display: block;
           position: absolute;
  
          .circle {
             position: absolute;
             float: left;
             background: $tc-gray-20;
             border: 3px solid $tc-gray-80;
             width: 13px;
             height: 13px;
             border-radius: 50%;
          }
          .completed {
             background: $tc-dark-blue;
          }
        }
      }
  
      .time-line {
        display: block;
        margin-bottom: 5px;
        height: 20px;
        width: 100%;
  
        .time-line-text {
           position: absolute;
           float: left;
           font-family: "Roboto", Arial, Helvetica, sans-serif;
           font-size: 11px;
           line-height: 15px;
           color: $tc-gray-30;
        }
      }
    }
  }
}