.ydb-doughnut-metrics {
    --doughnut-color: var(--g-color-base-positive-heavy);
    --doughnut-backdrop-color: var(--g-color-base-generic);
    --doughnut-overlap-color: var(--g-color-base-positive-heavy-hover);
    --doughnut-text-color: var(--g-color-text-positive-heavy);

    position: relative;

    &__doughnut {
        position: relative;

        display: block;

        // Enable smooth rendering for SVG
        shape-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        // Ensure SVG renders smoothly
        image-rendering: smooth;
        will-change: transform;

        // Preserve rotation origin
        transform-origin: center;
    }

    // Progress circle animation
    &__progress-circle,
    &__overlap-circle {
        transition: stroke-dasharray 0.3s ease;
        transform-origin: center;
    }

    // Status modifiers
    &_status_warning {
        --doughnut-color: var(--g-color-base-warning-heavy);
        --doughnut-overlap-color: var(--g-color-base-warning-heavy-hover);
        --doughnut-text-color: var(--g-color-text-warning);
    }

    &_status_danger {
        --doughnut-color: var(--g-color-base-danger-heavy);
        --doughnut-overlap-color: var(--g-color-base-danger-heavy-hover);
        --doughnut-text-color: var(--g-color-base-danger-heavy);
    }

    &__text-wrapper {
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 50%;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 100%;
        height: 100%;

        text-align: center;

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

    &__value {
        color: var(--doughnut-text-color);
    }

    &__legend-note {
        display: flex;
    }
}