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

.ydb-json-viewer {
    --toolbar-background-color: var(--g-color-base-background);
    width: 100%;

    &__toolbar {
        position: sticky;
        z-index: 2;
        top: var(--ydb-json-viewer-toolbar-top, 0);
        left: 0;

        padding-bottom: var(--g-spacing-5);

        background-color: var(--toolbar-background-color);
    }

    &__match-counter {
        align-content: center;

        text-wrap: nowrap;
    }
    .g-ru-cell {
        &__key {
            color: var(--g-color-text-misc);
        }
        &__value {
            &_type {
                &_string {
                    color: var(--color-unipika-string);
                }
                &_boolean {
                    color: var(--color-unipika-bool);
                }
                &_null {
                    color: var(--color-unipika-null);
                }
                &_int64 {
                    color: var(--color-unipika-int);
                }
                &_double {
                    color: var(--color-unipika-float);
                }
            }
        }
    }

    &__filter {
        --g-button-height: 24px;
        --g-button-border-radius: 4px;
        width: 300px;
    }

    &__match-btn {
        margin-left: -1px;
    }
}