.BOSUI_GAUGE {
    --bosui-gauge-value: 0.3;
    --bosui-gauge-size: 100%;
    --bosui-gauge-cutout: 60%;
    --bosui-gauge-unit-size: 60cqw;
    --bosui-gauge-color: var(--ita-colors-primary-500);
    container-type: inline-size;
    container-name: bosui_gauge;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    line-height: 1em;
    width: 100%;
    aspect-ratio: 1;
}
.BOSUI_GAUGE::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--bosui-gauge-size) / 2);
    mask-image: radial-gradient(circle at center, transparent var(--bosui-gauge-cutout), black calc(var(--bosui-gauge-cutout) + 1px));
    background: conic-gradient(
        from -135deg,
        var(--bosui-gauge-color) calc(270deg * var(--bosui-gauge-value)),
        color-mix(in srgb, var(--bosui-gauge-color) 10%, transparent 80%) calc(270deg * var(--bosui-gauge-value)) 270deg,
        transparent 270deg
    );
}
.BOSUI_GAUGE__TEXT {
    position: relative;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-size: 30cqw;
    color: var(--bosui-gauge-color);
}
.BOSUI_GAUGE__UNIT {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(7px, 5cqw, 32px);
    font-weight: 500;
    line-height: 1.1em;
    text-transform: uppercase;
    color: var(--ita-colors-neutral-700);
}
.BOSUI_GAUGE__UNIT.ALT {
    font-size: clamp(9px, 10cqw, 32px);
}
.BOSUI_GAUGE__LOW,
.BOSUI_GAUGE__HIGH {
    position: absolute;
    bottom: 0%;
    font-weight: 700;
    font-size: clamp(10px, 7cqw, 7cqw);
    line-height: 1em;
    color: white;
    border-radius: 3px;
    padding: 0.1em 0.3em;
    background-color: var(--ita-colors-neutral-400);
    color: var(--ita-colors-neutral-700);
}
.BOSUI_GAUGE__LOW {
    right: 80%;
    text-align: right;
}
.BOSUI_GAUGE__HIGH {
    left: 80%;
    text-align: left;
}

/* @container bosui_gauge (width < 300px) {
    .BOSUI_GAUGE__TEXT {
        color: fuchsia;
    }
} */