// Custom space legend colors for VDisk space visualization
// These colors are used in the Storage Expert Mode Panel

.g-root {
    // Cyan colors
    --ydb-space-cyan-bg: rgba(71, 247, 235, 0.15);

    // Light Orange colors
    --ydb-space-light-orange-bg: rgba(255, 178, 0, 0.2);

    // Pre Orange colors
    --ydb-space-pre-orange-bg: rgba(255, 128, 0, 0.2);

    // Orange colors
    --ydb-space-orange-bg: rgba(255, 89, 0, 0.2);

    // Theme-specific text and background colors
    &_theme_light,
    &_theme_light-hc {
        --ydb-space-cyan-text: rgba(11, 153, 144, 1);
        --ydb-space-cyan-bg-hover: rgba(9, 202, 189, 0.3);
        --ydb-space-cyan-fill-color: rgba(71, 247, 235, 0.2);
        --ydb-space-cyan-fill-color-hover: rgba(9, 202, 189, 0.35);

        --ydb-space-light-yellow-bg: rgba(242, 255, 2, 0.3);
        --ydb-space-light-yellow-border: rgba(211, 194, 0, 1);
        --ydb-space-light-yellow-stripe: rgba(211, 223, 0, 0.3);
        --ydb-space-light-yellow-stripe-hover: rgba(211, 223, 0, 0.4);
        --ydb-space-light-yellow-text: rgba(128, 118, 0, 1);
        --ydb-space-light-yellow-bg-hover: rgba(242, 255, 2, 0.4);
        --ydb-space-light-yellow-fill-color: rgba(128, 118, 0, 0.2);
        --ydb-space-light-yellow-fill-color-hover: rgba(128, 118, 0, 0.3);

        --ydb-space-light-orange-text: rgba(221, 125, 0, 1);
        --ydb-space-light-orange-bg-hover: rgba(255, 178, 0, 0.3);
        --ydb-space-light-orange-fill-color: rgba(255, 183, 1, 0.2);
        --ydb-space-light-orange-fill-color-hover: rgba(255, 183, 1, 0.2);

        --ydb-space-pre-orange-text: rgba(225, 112, 0, 1);
        --ydb-space-pre-orange-bg-hover: rgba(255, 128, 0, 0.3);
        --ydb-space-pre-orange-fill-color: rgba(255, 128, 0, 0.2);
        --ydb-space-pre-orange-fill-color-hover: rgba(255, 128, 0, 0.2);

        --ydb-space-orange-text: rgba(206, 77, 9, 1);
        --ydb-space-orange-bg-hover: rgba(255, 100, 17, 0.3);
        --ydb-space-orange-fill-color: rgba(255, 89, 0, 0.2);
        --ydb-space-orange-fill-color-hover: rgba(255, 89, 0, 0.2);

        --ydb-space-black-bg: var(--g-color-base-neutral-medium);
        --ydb-space-black-bg-hover: var(--g-color-base-neutral-medium-hover);
        --ydb-space-black-text: var(--g-color-text-primary);
        --ydb-space-black-border: var(--g-color-base-neutral-heavy);
        --ydb-space-black-border-hover: var(--g-color-base-neutral-heavy);
        --ydb-space-black-fill-color: var(--g-color-base-neutral-heavy);
        --ydb-space-black-fill-color-hover: var(--g-color-base-neutral-heavy-hover);

        --ydb-space-no-data-bg: var(--g-color-base-generic-medium);
        --ydb-space-no-data-bg-hover: var(--g-color-base-generic-medium-hover);
        --ydb-space-no-data-fill-color: var(--g-color-base-neutral-medium);
        --ydb-space-no-data-fill-color-hover: var(--g-color-base-neutral-medium-hover);
    }

    &_theme_dark,
    &_theme_dark-hc {
        --ydb-space-cyan-text: rgba(4, 202, 188, 1);
        --ydb-space-cyan-bg-hover: rgba(9, 202, 189, 0.25);
        --ydb-space-cyan-fill-color: rgba(71, 247, 235, 0.2);
        --ydb-space-cyan-fill-color-hover: rgba(9, 202, 189, 0.35);

        --ydb-space-light-yellow-bg: rgba(212, 255, 113, 0.15);
        --ydb-space-light-yellow-text: rgba(244, 255, 26, 1);
        --ydb-space-light-yellow-bg-hover: rgba(205, 230, 16, 0.25);
        --ydb-space-light-yellow-fill-color: rgba(212, 255, 113, 0.2);
        --ydb-space-light-yellow-fill-color-hover: rgba(205, 230, 16, 0.35);

        --ydb-space-light-orange-text: rgba(255, 178, 0, 1);
        --ydb-space-light-orange-bg-hover: rgba(255, 183, 1, 0.3);
        --ydb-space-light-orange-fill-color: rgba(255, 178, 0, 0.2);
        --ydb-space-light-orange-fill-color-hover: rgba(255, 178, 0, 0.2);

        --ydb-space-pre-orange-text: rgba(255, 128, 0, 1);
        --ydb-space-pre-orange-bg-hover: rgba(255, 128, 0, 0.3);
        --ydb-space-pre-orange-fill-color: rgba(255, 128, 0, 0.2);
        --ydb-space-pre-orange-fill-color-hover: rgba(255, 128, 0, 0.2);

        --ydb-space-orange-text: rgba(255, 89, 0, 1);
        --ydb-space-orange-bg-hover: rgba(255, 100, 17, 0.3);
        --ydb-space-orange-fill-color: rgba(255, 89, 0, 0.2);
        --ydb-space-orange-fill-color-hover: rgba(255, 89, 0, 0.2);

        --ydb-space-black-bg: var(--g-color-text-dark-complementary);
        --ydb-space-black-bg-hover: var(--g-color-text-dark-secondary);
        --ydb-space-black-text: var(--g-color-text-brand-contrast);
        --ydb-space-black-border: var(--g-color-line-light);
        --ydb-space-black-border-hover: var(--g-color-line-light);
        --ydb-space-black-fill-color: var(--g-color-base-neutral-light);
        --ydb-space-black-fill-color-hover: var(--g-color-base-neutral-light-hover);

        --ydb-space-no-data-bg: var(--g-color-base-generic-medium);
        --ydb-space-no-data-bg-hover: var(--g-color-base-generic-medium-hover);
        --ydb-space-no-data-fill-color: var(--g-color-base-neutral-medium);
        --ydb-space-no-data-fill-color-hover: var(--g-color-base-neutral-medium-hover);
    }
}