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

.kv-top-queries {
    display: flex;
    flex-direction: column;

    height: 100%;

    @include mixins.query-data-table;

    &__search {
        @include mixins.search();
    }

    &__row {
        cursor: pointer;

        &_active {
            background-color: var(--g-color-base-selection);

            &:hover {
                background: var(--g-color-base-selection-hover) !important;
            }
        }
    }

    &__query {
        overflow: hidden;

        vertical-align: top;
        white-space: pre-wrap;
        text-overflow: ellipsis;
        word-break: break-word;
    }

    &__text-cell {
        overflow: hidden;

        max-width: 200px;

        text-overflow: ellipsis;
    }

    &__drawer {
        margin-top: calc(-1 * var(--g-spacing-4));
    }

    &__empty-state-icon {
        color: var(--g-color-text-primary);
    }

    &__not-found-container {
        height: 100%;
        padding: var(--g-spacing-5) 0;
    }

    &__not-found-description {
        margin-top: var(--g-spacing-2);
    }

    &__not-found-close {
        margin-top: var(--g-spacing-5);
    }
}