@use '../../core/styles/common';
@use '../filter-bar-theme' as *;

.kbq-pipe {
    display: flex;
    flex-direction: row;

    max-height: 32px;

    & .kbq-select .kbq-select__trigger {
        height: unset;
    }

    .kbq-button-wrapper {
        max-width: 320px;
    }

    .kbq-pipe__name {
        @include common.kbq-truncate-line();

        flex: 1 1 auto;

        color: var(--kbq-foreground-contrast-secondary);
    }

    .kbq-pipe__value {
        @include common.kbq-truncate-line();

        flex: 1 1 auto;

        &:not(.kbq-pipe__value_empty) {
            margin-left: 4px;
        }
    }

    .kbq-pipe__separator {
        z-index: 1;

        margin-left: -1px;
        margin-right: 0;

        height: var(--kbq-size-l);

        align-self: center;

        color: var(--kbq-line-contrast-less);
    }

    .kbq-select:not(:hover, .kbq-active),
    .kbq-tree-select:not(:hover, .kbq-active),
    .kbq-button:not(:hover, .kbq-active, [disabled]) {
        & + .kbq-pipe-button:not(:hover, .kbq-active)::after {
            content: '';
            position: absolute;
            left: 0;
            top: var(--kbq-size-s);

            width: 1px;
            height: var(--kbq-size-l);

            background: var(--kbq-line-contrast-less);
        }
    }

    .kbq-button.cdk-keyboard-focused {
        z-index: 1;
    }

    &.kbq-pipe_disabled {
        .kbq-pipe__name,
        .kbq-pipe__value {
            color: var(--kbq-states-foreground-disabled);
        }
    }
}

.kbq-pipe.kbq-pipe_removable,
.kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
    .kbq-button {
        border-bottom-right-radius: unset;
        border-top-right-radius: unset;
        border-right: none;

        &.cdk-keyboard-focused::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: var(--kbq-states-line-focus-theme);
        }
    }

    .kbq-button-icon {
        border-bottom-left-radius: unset;
        border-top-left-radius: unset;
        border-left: none;

        &.cdk-keyboard-focused::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: var(--kbq-states-line-focus-theme);
        }
    }
}

.kbq-pipe-tooltip__name {
    color: var(--kbq-foreground-white-secondary);
}

.kbq-pipe-tooltip__value {
    color: var(--kbq-foreground-white);
}