/*
 * Progress Circle widget.
 *
 * The fill's length is out of 100 whatever the size (pathLength), so the number
 * in the markup is the percentage. Without the script the ring is simply full to it.
 */
.ekl-ring {
    @apply inline-flex flex-col items-center text-center;
}

.ekl-ring__shape {
    @apply relative inline-block leading-none;
}

.ekl-ring__svg {
    @apply block h-auto;

    width: 160px;
}

.ekl-ring__track,
.ekl-ring__fill {
    stroke-width: 8;
}

.ekl-ring__track {
    stroke: #ededed;
}

.ekl-ring__fill {
    stroke: var(--color-ekl-hover);
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s ease-out;
}

.ekl-ring__inner {
    @apply absolute left-1/2 top-1/2 text-[28px] font-bold leading-none text-ekl-text;

    transform: translate(-50%, -50%);
}

/* The half ring has its figure under the arch, not in the middle of a circle that is not there. */
.ekl-ring--semi .ekl-ring__inner {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
}

.ekl-ring__title {
    @apply mt-[12px] text-[16px] font-semibold leading-[1.4] text-ekl-text;
}

@media (prefers-reduced-motion: reduce) {
    .ekl-ring__fill {
        transition: none;
    }
}