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

.progress-viewer {
    $block: &;

    position: relative;
    z-index: 0;

    display: flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;

    min-width: 150px;
    height: 23px;
    padding: 0 4px;

    font-size: var(--g-text-body-2-font-size);
    white-space: nowrap;

    color: var(--g-color-text-complementary);
    border-radius: 2px;
    background: var(--g-color-base-generic);

    &_theme_dark {
        color: var(--g-color-text-light-primary);

        // Ensure better contrast with text
        #{$block}__line {
            opacity: 0.75;
        }
    }

    &_status {
        &_good {
            background-color: var(--g-color-base-positive-light);
            #{$block}__line {
                background-color: var(--ydb-color-status-green);
            }
        }
        &_warning {
            background-color: var(--g-color-base-yellow-light);
            #{$block}__line {
                background-color: var(--ydb-color-status-yellow);
            }
        }
        &_danger {
            background-color: var(--g-color-base-danger-light);
            #{$block}__line {
                background-color: var(--ydb-color-status-red);
            }
        }
        &_info {
            background-color: var(--g-color-base-info-light);
            #{$block}__line {
                background-color: var(--ydb-color-status-blue);
            }
        }
    }

    &__line {
        position: absolute;
        top: 0;
        left: 0;

        height: 100%;
    }

    &__text {
        position: relative;
        z-index: 1;
    }

    &_size_xs {
        height: 20px;

        @include mixins.body-2-typography();
    }

    &_size_s {
        height: 28px;

        font-size: var(--g-text-body-1-font-size);
        line-height: 28px;
    }
    &_size_m {
        height: 32px;

        font-size: var(--g-text-body-2-font-size);
        line-height: 32px;
    }

    &_size_ns {
        height: 24px;

        font-size: 13px;
        line-height: var(--g-text-subheader-3-line-height);
    }

    &_size_n {
        height: 36px;

        font-size: var(--g-text-body-1-font-size);
        line-height: 36px;
    }

    &_size_l {
        height: 38px;

        font-size: var(--g-text-subheader-3-font-size);
        line-height: 38px;
    }

    &_size_head {
        font-size: var(--g-text-body-1-font-size);
        line-height: 36px;
    }
}