$infodial-break:380px !default; $infodial-fontsize:4rem !default; $color-infodial-empty:#f2f2f2; .infodial { display:flex; flex-direction:column; margin:0 auto; position:relative; width:100%; @media (min-width:$infodial-break) { &::before { content:""; display:block; height:0; padding-top:100%; width:100%; z-index:1; } } .infodialtext { justify-content:center; display:flex; flex-direction:column; margin-top:1rem; @media (min-width:$infodial-break) { height:100%; left:25%; margin-top:0; position:absolute; width:50%; z-index:3; } .infodialnumber { @include condensed-font; font-size:$infodial-fontsize; line-height:1; &.make-counter { display:inline-flex !important; height:$infodial-fontsize; justify-content:center; } } } .chart { border-radius:50%; height:auto; transform:rotate(-90deg); width:100%; @media (min-width:$infodial-break) { height:100%; position:absolute; } .dial { fill:transparent; stroke-width:15%; stroke:$color-infodial-empty; } .reading { fill:transparent; stroke-width:15%; stroke-dasharray:1 314.159%; stroke-dashoffset:1; transition:all 1s; } } &.purple { .infodialtext .infodialnumber { color:var(--purple); } .chart .reading { stroke:var(--purple); } } &.orange { .infodialtext .infodialnumber { color:var(--orange); } .chart .reading { stroke:var(--orange); } } &.green { .infodialtext .infodialnumber { color:var(--green); } .chart .reading { stroke:var(--green); } } &.blue { .infodialtext .infodialnumber { color:var(--blue); } .chart .reading { stroke:var(--blue); } } &.not-inview { .chart .reading { @media (prefers-reduced-motion: no-preference) { stroke-dasharray:1% ($mathPI * 100%) !important; stroke-dashoffset:1% !important; } } } }