.circle-stats {
    --circle-size: 100px;

    flex-grow: 0;
    flex-shrink: 0;
    padding-inline-end: calc(var(--circle-size) / 2);
    display: flex;
    flex-direction: column;
    color: var(--near-black);

    & .circle-stat {
        --icon-scale: 1;

        border-bottom: 2px solid var(--primary-color);
        padding-bottom: 10px;
        width: 100%;
        max-width: 460px;

        display: flex;
        flex-direction: row;

        @media (--md-down) {
            margin-bottom: 20px;
        }

        @media (--lg-up) {
            margin-bottom: 30px;
        }

        &.valid-hours {
            --primary-color: var(--valid-green);

            & .circle {
                border-bottom-color: color-mod(var(--valid-green) alpha(80%));
                border-inline-end-color: color-mod(
                    var(--valid-green) alpha(60%)
                );
                border-top-color: color-mod(var(--valid-green) alpha(20%));
            }
        }

        &.total-hours {
            --primary-color: var(--red);

            & .circle {
                border-bottom-color: color-mod(var(--red) alpha(80%));
                border-inline-end-color: color-mod(var(--red) alpha(60%));
                border-top-color: color-mod(var(--red) alpha(20%));
            }
        }

        &.languages {
            --primary-color: var(--blue);
            --icon-scale: 1.3;
            & .circle {
                border-bottom-color: color-mod(var(--blue) alpha(80%));
                border-inline-end-color: color-mod(var(--blue) alpha(60%));
                border-top-color: color-mod(var(--blue) alpha(20%));
            }
        }
    }

    & .dots {
        @media (width < 400px) {
            display: none;
        }
    }

    & .text {
        padding: 20px 0;

        @media (--md-down) {
            padding-inline-start: 10px;
        }

        @media (--lg-up) {
            padding-inline-start: 20px;
        }

        & .label {
            line-height: 1.5;
        }

        & .value {
            font-size: 48px;
            font-weight: 600;
        }
    }

    & .circle {
        margin-inline-start: auto;
        border: 10px solid black;
        border-inline-start-color: var(--primary-color);
        border-radius: 50%;
        width: var(--circle-size);
        height: var(--circle-size);
        position: relative;
        inset-inline-start: calc(var(--circle-size) / 2);

        display: flex;
        justify-content: center;
        align-items: center;
        transform: rotateZ(45deg);

        & svg {
            transform: rotateZ(-45deg) scale(var(--icon-scale));
        }

        & path {
            fill: var(--primary-color);
        }
    }
}
