.component-gauge {
    --gauge-width: 100%;
    --gauge-value: 100;
    --gauge-color: #111827;
    --gauge-max-color: #6b7280;
    --gauge-outline-color: #e5e7eb;
    --gauge-stroke-width: 8;
    --gauge-max-display: block;
    --gauge-shadow-display: block;

    width: var(--gauge-width);
    position: relative;
    container-type: inline-size;

    .gauge {
        width: 100%;
        height: auto;
        display: block;
        filter: drop-shadow(0px 0px 1px rgb(from var(--color-btm-dark-blue) r g b / .5));

        .gauge-bg {
            stroke: var(--gauge-outline-color);
            fill: none;
            stroke-width: var(--gauge-stroke-width);
            stroke-linecap: round;
            transition: all 0.3s linear;
        }

        .gauge-progress {
            fill: none;
            stroke-width: var(--gauge-stroke-width);
            stroke-linecap: round;
            stroke: var(--gauge-color);
            stroke-dasharray: 157px;
            stroke-dashoffset: calc(157px - (157 * var(--gauge-value) * 1px) / 100);
            transition: all 0.5s ease-in-out;
        }

        .gauge-border {
            display: var(--gauge-shadow-display);
            position: relative;
            z-index: 4;
            fill: none;
            stroke-width: var(--gauge-stroke-width);
            stroke-linecap: round;
            filter: blur(4px);
            stroke: rgb(from #fff r g b / 0.5);
            stroke-dasharray: 157px;
            stroke-dashoffset: calc(157px - (157 * var(--gauge-value) * 1px) / 100);
            transition: all 0.5s ease-in-out;
        }
    }

    .gauge-text-spacer {
        height: 24px;
        display: var(--gauge-max-display);
    }

    .gauge-text {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;

        .value {
            position: relative;
            font-size: 30cqw;
            font-weight: bold;
            line-height: 1;
            color: var(--gauge-color);
            font-family: 'IBM Plex Sans', sans-serif;

            &:after {
                position: absolute;
                top: -3px;
                left: -3px;
                right: 0;
                bottom: 0;
                display: var(--gauge-shadow-display);
                content: attr(data-value);
                font: inherit;
                color: rgb(from #fff r g b / 0.3);
                filter: blur(4px);
            }
        }

        .max {
            display: var(--gauge-max-display);
            font-size: 18px;
            font-weight: 600;
            color: var(--gauge-max-color);
            line-height: 1;
            font-family: 'Poppins', sans-serif;
        }
    }
}