.gauge {
    --color: #fff;
    container-type: inline-size;
    container-name: gauge;
    border-radius: 100%;
    overflow: clip;
    aspect-ratio: 1;
    text-align: center;
    position: relative;

    .gauge-ticks {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 2;

        .gauge-tick {
            --rotation: 0deg;
            background-color: var(--color);
            position: absolute;
            width: 0.5cqi;
            height: 4cqi;
            left: 50%;
            top: 50%;
            transform-origin: 0 50%;
            transform: translateX(-50%) translateY(-50%) rotateZ(var(--rotation)) translateY(-50cqi) translateY(50%);

            &.gauge-tick-long {
                width: 1cqi;
                height: 6cqi;
            }
        }

        .gauge-tick-text {
            --rotation: 0deg;
            color: var(--color);
            position: absolute;
            font-size: 4cqi;
            left: 50%;
            top: 50%;
            transform-origin: 0 50%;
            transform: translateX(-50%) translateY(-50%) rotateZ(var(--rotation)) translateY(-38cqi) rotateZ(calc(0deg - var(--rotation)));

            &.gauge-tick-long {
                width: 2px;
                height: 10cqi;
            }
        }
    }

    .gauge-needle {
        --rotation: 0deg;
        background-image: url('/UI/Needle.webp');
        background-size: 100% 100%;
        background-position: center;
        position: absolute;
        left: 50%;
        bottom: 50%;
        height: 30cqi;
        aspect-ratio: 1 / 10;
        transform-origin: bottom;
        transform: translateX(-50%) rotateZ(var(--rotation));
        z-index: 1;
    }

    .gauge-value {
        position: absolute;
        left: 50%;
        top: 70%;
        transform: translateX(-50%) translateY(-50%);
        z-index: 0;

        &::before {
            content: '';
            display: block;
            background-color: #222;
            box-shadow: 0 2.5cqi 5cqi #222;
            border-radius: 100%;
            position: absolute;
            z-index: -1;
            left: 50%;
            top: 50%;
            width: 25cqi;
            aspect-ratio: 1;
            transform: translateX(-50%) translateY(-37.5%) rotateX(75deg);
        }
    }

    &.gauge-top .gauge-value {
        top: 30%;
        transform: translateX(-50%) translateY(-50%);
    }

    &.gauge-left .gauge-value {
        left: 30%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }

    &.gauge-right .gauge-value {
        left: 70%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
    }
}