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

.info-viewer {
    --ydb-info-viewer-font-size: var(--g-text-body-2-font-size);
    --ydb-info-viewer-line-height: var(--g-text-body-2-line-height);
    --ydb-info-viewer-title-font-weight: 600;
    --ydb-info-viewer-items-gap: 7px;

    font-size: var(--ydb-info-viewer-font-size);
    line-height: var(--ydb-info-viewer-line-height);

    &__title {
        margin: var(--ydb-info-viewer-title-margin, 15px 0 10px);

        font-weight: var(--ydb-info-viewer-title-font-weight);
    }

    &__items {
        display: flex;
        flex-direction: column;
        gap: var(--ydb-info-viewer-items-gap);

        max-width: 100%;
    }

    &__row {
        display: flex;
        align-items: baseline;

        max-width: 100%;
        padding-top: 4px;
    }

    &__label {
        display: flex;
        flex: 0 1 auto;
        align-items: baseline;

        min-width: 200px;

        white-space: nowrap;

        color: var(--g-color-text-secondary);
    }

    &__label-text {
        &_multiline {
            overflow: visible;

            max-width: 180px;

            white-space: normal;
        }
    }

    &__dots {
        display: flex;
        flex: 1 1 auto;

        margin: 0 2px;

        border-bottom: 1px dotted var(--g-color-text-secondary);
    }

    &__value {
        display: flex;

        min-width: 130px;

        word-break: break-all;
    }

    &_size {
        &_s {
            --ydb-info-viewer-font-size: var(--g-text-body-1-font-size);
            --ydb-info-viewer-line-height: var(--g-text-body-1-line-height);
            --ydb-info-viewer-title-font-weight: 500;
            --ydb-info-viewer-title-margin: 0 0 4px;
            --ydb-info-viewer-items-gap: 4px;

            .info-viewer {
                &__row {
                    height: auto;
                }

                &__label {
                    min-width: 85px;
                }
            }
        }
    }

    &_variant_small {
        .info-viewer__title {
            margin: 0 0 var(--g-spacing-3);

            color: var(--g-color-text-primary);
            @include mixins.subheader-1-typography();
        }

        .info-viewer__label {
            color: var(--g-color-text-secondary);
            @include mixins.body-1-typography();
        }

        .info-viewer__row:first-child {
            padding-top: 0;
        }
    }
}