.xcd{
--xcd-color: currentColor;
--xcd-scale: 1;
--xcd-gap: 12px;
color: var(--xcd-color);
display: grid;
place-items: center;
text-align: center;
padding: 0.25rem;
} [data-xcd-deadline]{
position: relative;
display: inline-grid;
place-items: center;
min-width: 8ch; min-height: 3ch;
} [data-xcd-deadline]:not(.xcd-ready){
color: transparent;
} [data-xcd-deadline]:not(.xcd-ready)::after{
content: "";
width: 24px;
height: 24px;
border: 2px solid rgba(128,128,128,.3);
border-top-color: rgba(128,128,128,.85);
border-radius: 50%;
animation: xcd-spin .8s linear infinite;
display: inline-block;
} [data-xcd-deadline].xcd-ready::after{
content: none;
}
@keyframes xcd-spin{ to { transform: rotate(360deg);} } .xcd-grid{
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
column-gap: calc(var(--xcd-gap) * 2);
align-items: end;
justify-items: center;
}
.xcd-col{
position: relative;
display: grid;
justify-items: center;
align-items: center;
row-gap: 0.35rem;
}
.xcd-num{
font-size: calc(2.25rem * var(--xcd-scale));
font-variant-numeric: tabular-nums;
letter-spacing: 2px;
line-height: 1;
}
.xcd-label{
display: block;
font-size: calc(0.7rem * var(--xcd-scale));
letter-spacing: 3px;
opacity: .85;
} .xcd:not(.xcd-no-sep) .xcd-col:not(:last-child)::after{
content: var(--xcd-sep, ":" );
position: absolute;
top: 0;
right: calc(-1 * var(--xcd-gap));
font-size: calc(2.25rem * var(--xcd-scale));
line-height: 1;
opacity: .9;
pointer-events: none;
}
.xcd-finish{
font-size: calc(1.25rem * var(--xcd-scale));
font-weight: 600;
}