@use '../../../../styles/mixins';

.ydb-storage-expert-mode-panel {
    --label-checkbox-size: 14px;

    @each $color in 'green', 'cyan', 'light-yellow', 'yellow', 'light-orange', 'pre-orange',
        'orange', 'red', 'black'
    {
        &__label_#{$color} {
            @include mixins.capacity-alert-label-colors($color);

            &:hover {
                background-color: var(--ydb-capacity-alert-label-background) !important;
            }
        }
    }

    &__label {
        border-radius: var(--g-border-radius-s);
        .g-label__addon_side_start {
            inset-inline-start: 0;
        }
    }

    .g-label:has(.g-label__addon_side_start) .g-label__text {
        margin-inline-start: 22px;
    }

    &__label-icon {
        width: var(--label-checkbox-size);
        height: var(--label-checkbox-size);

        border: 1px solid var(--g-color-line-generic-accent);
        border-radius: var(--g-border-radius-xs);
        background-color: transparent;
    }

    &__label-icon_selected {
        display: flex;
        justify-content: center;
        align-items: center;

        color: var(--g-color-text-brand-contrast);
        border: none;
        background-color: var(--g-color-base-generic-medium);
    }
}