/*--------------------------------------------------------------------------*\
    Progress bar
\*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*\
        Container
\*--------------------------------------------------------------------------*/

.progress-bar{
    /*box*/
    position:relative;
    height:18px;
    width:100%;

    /*border*/
    border-width:1.5px;
    border-style: solid;
    border-radius: 10px;
}

.progress-bar--cta{
    /*border*/
    border-color:var(--c-cta-2);
}

.progress-bar--primary{
    /*border*/
    border-color:var(--c-primary-4);
}

/*--------------------------------------------------------------------------*\
        Gauge
\*--------------------------------------------------------------------------*/

.progress-bar::before {
    /*box*/
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    min-width:5%;

    /*border*/
    border-radius: 10px;

    /*text*/
    content:'';

    /*transition*/
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
  }

.progress-bar--cta::before{
    /*background*/
    background-color: var(--c-cta-2);
}

.progress-bar--primary::before{
    /*background*/
    background-color: var(--c-primary-4);
}

.progress-bar[data-progress-value="0"]::before{width:0%}
.progress-bar[data-progress-value="1"]::before{width:1%}
.progress-bar[data-progress-value="2"]::before{width:2%}
.progress-bar[data-progress-value="3"]::before{width:3%}
.progress-bar[data-progress-value="4"]::before{width:4%}
.progress-bar[data-progress-value="5"]::before{width:5%}
.progress-bar[data-progress-value="6"]::before{width:6%}
.progress-bar[data-progress-value="7"]::before{width:7%}
.progress-bar[data-progress-value="8"]::before{width:8%}
.progress-bar[data-progress-value="9"]::before{width:9%}
.progress-bar[data-progress-value="10"]::before{width:10%}
.progress-bar[data-progress-value="11"]::before{width:11%}
.progress-bar[data-progress-value="12"]::before{width:12%}
.progress-bar[data-progress-value="13"]::before{width:13%}
.progress-bar[data-progress-value="14"]::before{width:14%}
.progress-bar[data-progress-value="15"]::before{width:15%}
.progress-bar[data-progress-value="16"]::before{width:16%}
.progress-bar[data-progress-value="17"]::before{width:17%}
.progress-bar[data-progress-value="18"]::before{width:18%}
.progress-bar[data-progress-value="19"]::before{width:19%}
.progress-bar[data-progress-value="20"]::before{width:20%}
.progress-bar[data-progress-value="21"]::before{width:21%}
.progress-bar[data-progress-value="22"]::before{width:22%}
.progress-bar[data-progress-value="23"]::before{width:23%}
.progress-bar[data-progress-value="24"]::before{width:24%}
.progress-bar[data-progress-value="25"]::before{width:25%}
.progress-bar[data-progress-value="26"]::before{width:26%}
.progress-bar[data-progress-value="27"]::before{width:27%}
.progress-bar[data-progress-value="28"]::before{width:28%}
.progress-bar[data-progress-value="29"]::before{width:29%}
.progress-bar[data-progress-value="30"]::before{width:30%}
.progress-bar[data-progress-value="31"]::before{width:31%}
.progress-bar[data-progress-value="32"]::before{width:32%}
.progress-bar[data-progress-value="33"]::before{width:33%}
.progress-bar[data-progress-value="34"]::before{width:34%}
.progress-bar[data-progress-value="35"]::before{width:35%}
.progress-bar[data-progress-value="36"]::before{width:36%}
.progress-bar[data-progress-value="37"]::before{width:37%}
.progress-bar[data-progress-value="38"]::before{width:38%}
.progress-bar[data-progress-value="39"]::before{width:39%}
.progress-bar[data-progress-value="40"]::before{width:40%}
.progress-bar[data-progress-value="41"]::before{width:41%}
.progress-bar[data-progress-value="42"]::before{width:42%}
.progress-bar[data-progress-value="43"]::before{width:43%}
.progress-bar[data-progress-value="44"]::before{width:44%}
.progress-bar[data-progress-value="45"]::before{width:45%}
.progress-bar[data-progress-value="46"]::before{width:46%}
.progress-bar[data-progress-value="47"]::before{width:47%}
.progress-bar[data-progress-value="48"]::before{width:48%}
.progress-bar[data-progress-value="49"]::before{width:49%}
.progress-bar[data-progress-value="50"]::before{width:50%}
.progress-bar[data-progress-value="51"]::before{width:51%}
.progress-bar[data-progress-value="52"]::before{width:52%}
.progress-bar[data-progress-value="53"]::before{width:53%}
.progress-bar[data-progress-value="54"]::before{width:54%}
.progress-bar[data-progress-value="55"]::before{width:55%}
.progress-bar[data-progress-value="56"]::before{width:56%}
.progress-bar[data-progress-value="57"]::before{width:57%}
.progress-bar[data-progress-value="58"]::before{width:58%}
.progress-bar[data-progress-value="59"]::before{width:59%}
.progress-bar[data-progress-value="60"]::before{width:60%}
.progress-bar[data-progress-value="61"]::before{width:61%}
.progress-bar[data-progress-value="62"]::before{width:62%}
.progress-bar[data-progress-value="63"]::before{width:63%}
.progress-bar[data-progress-value="64"]::before{width:64%}
.progress-bar[data-progress-value="65"]::before{width:65%}
.progress-bar[data-progress-value="66"]::before{width:66%}
.progress-bar[data-progress-value="67"]::before{width:67%}
.progress-bar[data-progress-value="68"]::before{width:68%}
.progress-bar[data-progress-value="69"]::before{width:69%}
.progress-bar[data-progress-value="70"]::before{width:70%}
.progress-bar[data-progress-value="71"]::before{width:71%}
.progress-bar[data-progress-value="72"]::before{width:72%}
.progress-bar[data-progress-value="73"]::before{width:73%}
.progress-bar[data-progress-value="74"]::before{width:74%}
.progress-bar[data-progress-value="75"]::before{width:75%}
.progress-bar[data-progress-value="76"]::before{width:76%}
.progress-bar[data-progress-value="77"]::before{width:77%}
.progress-bar[data-progress-value="78"]::before{width:78%}
.progress-bar[data-progress-value="79"]::before{width:79%}
.progress-bar[data-progress-value="80"]::before{width:80%}
.progress-bar[data-progress-value="81"]::before{width:81%}
.progress-bar[data-progress-value="82"]::before{width:82%}
.progress-bar[data-progress-value="83"]::before{width:83%}
.progress-bar[data-progress-value="84"]::before{width:84%}
.progress-bar[data-progress-value="85"]::before{width:85%}
.progress-bar[data-progress-value="86"]::before{width:86%}
.progress-bar[data-progress-value="87"]::before{width:87%}
.progress-bar[data-progress-value="88"]::before{width:88%}
.progress-bar[data-progress-value="89"]::before{width:89%}
.progress-bar[data-progress-value="90"]::before{width:90%}
.progress-bar[data-progress-value="91"]::before{width:91%}
.progress-bar[data-progress-value="92"]::before{width:92%}
.progress-bar[data-progress-value="93"]::before{width:93%}
.progress-bar[data-progress-value="94"]::before{width:94%}
.progress-bar[data-progress-value="95"]::before{width:95%}
.progress-bar[data-progress-value="96"]::before{width:96%}
.progress-bar[data-progress-value="97"]::before{width:97%}
.progress-bar[data-progress-value="98"]::before{width:98%}
.progress-bar[data-progress-value="99"]::before{width:99%}
.progress-bar[data-progress-value="100"]::before{width:100%}

/*--------------------------------------------------------------------------*\
        Value
\*--------------------------------------------------------------------------*/

.progress-bar::after {
    /*box*/
    position: absolute;
    top: 0;
    height: 100%;

    /*text*/
    color:var(--c-tertiary-4);
    font-size: var(--fs-tn);
    line-height:1.2;

    /*transition*/
    -webkit-transition: left 0.3s;
    transition: left 0.3s;
}

.progress-bar[data-progress-value="0"]::after{content:'0%';left:5px;}
.progress-bar[data-progress-value="1"]::after{content:'1%';left:5px;}
.progress-bar[data-progress-value="2"]::after{content:'2%';left:5px;}
.progress-bar[data-progress-value="3"]::after{content:'3%';left:5px;}
.progress-bar[data-progress-value="4"]::after{content:'4%';left:5px;}
.progress-bar[data-progress-value="5"]::after{content:'5%';left:5px;}
.progress-bar[data-progress-value="6"]::after{content:'6%';left:5px;}
.progress-bar[data-progress-value="7"]::after{content:'7%';left:8px;}
.progress-bar[data-progress-value="8"]::after{content:'8%';left:10px;}
.progress-bar[data-progress-value="9"]::after{content:'9%';left:12px;}
.progress-bar[data-progress-value="10"]::after{content:'10%';left:14px;}
.progress-bar[data-progress-value="11"]::after{content:'11%';left:calc(11% - 40px);}
.progress-bar[data-progress-value="12"]::after{content:'12%';left:calc(12% - 40px);}
.progress-bar[data-progress-value="13"]::after{content:'13%';left:calc(13% - 40px);}
.progress-bar[data-progress-value="14"]::after{content:'14%';left:calc(14% - 40px);}
.progress-bar[data-progress-value="15"]::after{content:'15%';left:calc(15% - 40px);}
.progress-bar[data-progress-value="16"]::after{content:'16%';left:calc(16% - 40px);}
.progress-bar[data-progress-value="17"]::after{content:'17%';left:calc(17% - 40px);}
.progress-bar[data-progress-value="18"]::after{content:'18%';left:calc(18% - 40px);}
.progress-bar[data-progress-value="19"]::after{content:'19%';left:calc(19% - 40px);}
.progress-bar[data-progress-value="20"]::after{content:'20%';left:calc(20% - 40px);}
.progress-bar[data-progress-value="21"]::after{content:'21%';left:calc(21% - 40px);}
.progress-bar[data-progress-value="22"]::after{content:'22%';left:calc(22% - 40px);}
.progress-bar[data-progress-value="23"]::after{content:'23%';left:calc(23% - 40px);}
.progress-bar[data-progress-value="24"]::after{content:'24%';left:calc(24% - 40px);}
.progress-bar[data-progress-value="25"]::after{content:'25%';left:calc(25% - 40px);}
.progress-bar[data-progress-value="26"]::after{content:'26%';left:calc(26% - 40px);}
.progress-bar[data-progress-value="27"]::after{content:'27%';left:calc(27% - 40px);}
.progress-bar[data-progress-value="28"]::after{content:'28%';left:calc(28% - 40px);}
.progress-bar[data-progress-value="29"]::after{content:'29%';left:calc(29% - 40px);}
.progress-bar[data-progress-value="30"]::after{content:'30%';left:calc(30% - 40px);}
.progress-bar[data-progress-value="31"]::after{content:'31%';left:calc(31% - 40px);}
.progress-bar[data-progress-value="32"]::after{content:'32%';left:calc(32% - 40px);}
.progress-bar[data-progress-value="33"]::after{content:'33%';left:calc(33% - 40px);}
.progress-bar[data-progress-value="34"]::after{content:'34%';left:calc(34% - 40px);}
.progress-bar[data-progress-value="35"]::after{content:'35%';left:calc(35% - 40px);}
.progress-bar[data-progress-value="36"]::after{content:'36%';left:calc(36% - 40px);}
.progress-bar[data-progress-value="37"]::after{content:'37%';left:calc(37% - 40px);}
.progress-bar[data-progress-value="38"]::after{content:'38%';left:calc(38% - 40px);}
.progress-bar[data-progress-value="39"]::after{content:'39%';left:calc(39% - 40px);}
.progress-bar[data-progress-value="40"]::after{content:'40%';left:calc(40% - 40px);}
.progress-bar[data-progress-value="41"]::after{content:'41%';left:calc(41% - 40px);}
.progress-bar[data-progress-value="42"]::after{content:'42%';left:calc(42% - 40px);}
.progress-bar[data-progress-value="43"]::after{content:'43%';left:calc(43% - 40px);}
.progress-bar[data-progress-value="44"]::after{content:'44%';left:calc(44% - 40px);}
.progress-bar[data-progress-value="45"]::after{content:'45%';left:calc(45% - 40px);}
.progress-bar[data-progress-value="46"]::after{content:'46%';left:calc(46% - 40px);}
.progress-bar[data-progress-value="47"]::after{content:'47%';left:calc(47% - 40px);}
.progress-bar[data-progress-value="48"]::after{content:'48%';left:calc(48% - 40px);}
.progress-bar[data-progress-value="49"]::after{content:'49%';left:calc(49% - 40px);}
.progress-bar[data-progress-value="50"]::after{content:'50%';left:calc(50% - 40px);}
.progress-bar[data-progress-value="51"]::after{content:'51%';left:calc(51% - 40px);}
.progress-bar[data-progress-value="52"]::after{content:'52%';left:calc(52% - 40px);}
.progress-bar[data-progress-value="53"]::after{content:'53%';left:calc(53% - 40px);}
.progress-bar[data-progress-value="54"]::after{content:'54%';left:calc(54% - 40px);}
.progress-bar[data-progress-value="55"]::after{content:'55%';left:calc(55% - 40px);}
.progress-bar[data-progress-value="56"]::after{content:'56%';left:calc(56% - 40px);}
.progress-bar[data-progress-value="57"]::after{content:'57%';left:calc(57% - 40px);}
.progress-bar[data-progress-value="58"]::after{content:'58%';left:calc(58% - 40px);}
.progress-bar[data-progress-value="59"]::after{content:'59%';left:calc(59% - 40px);}
.progress-bar[data-progress-value="60"]::after{content:'60%';left:calc(60% - 40px);}
.progress-bar[data-progress-value="61"]::after{content:'61%';left:calc(61% - 40px);}
.progress-bar[data-progress-value="62"]::after{content:'62%';left:calc(62% - 40px);}
.progress-bar[data-progress-value="63"]::after{content:'63%';left:calc(63% - 40px);}
.progress-bar[data-progress-value="64"]::after{content:'64%';left:calc(64% - 40px);}
.progress-bar[data-progress-value="65"]::after{content:'65%';left:calc(65% - 40px);}
.progress-bar[data-progress-value="66"]::after{content:'66%';left:calc(66% - 40px);}
.progress-bar[data-progress-value="67"]::after{content:'67%';left:calc(67% - 40px);}
.progress-bar[data-progress-value="68"]::after{content:'68%';left:calc(68% - 40px);}
.progress-bar[data-progress-value="69"]::after{content:'69%';left:calc(69% - 40px);}
.progress-bar[data-progress-value="70"]::after{content:'70%';left:calc(70% - 40px);}
.progress-bar[data-progress-value="71"]::after{content:'71%';left:calc(71% - 40px);}
.progress-bar[data-progress-value="72"]::after{content:'72%';left:calc(72% - 40px);}
.progress-bar[data-progress-value="73"]::after{content:'73%';left:calc(73% - 40px);}
.progress-bar[data-progress-value="74"]::after{content:'74%';left:calc(74% - 40px);}
.progress-bar[data-progress-value="75"]::after{content:'75%';left:calc(75% - 40px);}
.progress-bar[data-progress-value="76"]::after{content:'76%';left:calc(76% - 40px);}
.progress-bar[data-progress-value="77"]::after{content:'77%';left:calc(77% - 40px);}
.progress-bar[data-progress-value="78"]::after{content:'78%';left:calc(78% - 40px);}
.progress-bar[data-progress-value="79"]::after{content:'79%';left:calc(79% - 40px);}
.progress-bar[data-progress-value="80"]::after{content:'80%';left:calc(80% - 40px);}
.progress-bar[data-progress-value="81"]::after{content:'81%';left:calc(81% - 40px);}
.progress-bar[data-progress-value="82"]::after{content:'82%';left:calc(82% - 40px);}
.progress-bar[data-progress-value="83"]::after{content:'83%';left:calc(83% - 40px);}
.progress-bar[data-progress-value="84"]::after{content:'84%';left:calc(84% - 40px);}
.progress-bar[data-progress-value="85"]::after{content:'85%';left:calc(85% - 40px);}
.progress-bar[data-progress-value="86"]::after{content:'86%';left:calc(86% - 40px);}
.progress-bar[data-progress-value="87"]::after{content:'87%';left:calc(87% - 40px);}
.progress-bar[data-progress-value="88"]::after{content:'88%';left:calc(88% - 40px);}
.progress-bar[data-progress-value="89"]::after{content:'89%';left:calc(89% - 40px);}
.progress-bar[data-progress-value="90"]::after{content:'90%';left:calc(90% - 40px);}
.progress-bar[data-progress-value="91"]::after{content:'91%';left:calc(91% - 40px);}
.progress-bar[data-progress-value="92"]::after{content:'92%';left:calc(92% - 40px);}
.progress-bar[data-progress-value="93"]::after{content:'93%';left:calc(93% - 40px);}
.progress-bar[data-progress-value="94"]::after{content:'94%';left:calc(94% - 40px);}
.progress-bar[data-progress-value="95"]::after{content:'95%';left:calc(95% - 40px);}
.progress-bar[data-progress-value="96"]::after{content:'96%';left:calc(96% - 40px);}
.progress-bar[data-progress-value="97"]::after{content:'97%';left:calc(97% - 40px);}
.progress-bar[data-progress-value="98"]::after{content:'98%';left:calc(98% - 40px);}
.progress-bar[data-progress-value="99"]::after{content:'99%';left:calc(99% - 40px);}
.progress-bar[data-progress-value="100"]::after{content:'100%';left:calc(100% - 40px);}