@import '../../../styles/variables.less';
@import '../../../styles/support.less';

:host {
    display: flex;
    padding: 0;
    margin: 0;
    line-height: 16px;
    max-height: 16px;
    white-space: nowrap;
    min-width: 100%;
    user-select: text;
    cursor: text;
    position: relative;
    &[data-selected="true"] {
        background: var(--scheme-color-4);
    }
    & span.tooltip {
        position: absolute;
        display: none;
        background: var(--scheme-color-accent);
        color: var(--scheme-color-0);
        padding: 3px 6px;
        border-radius: 2px;
        z-index: 10;
        margin-top: -28px;
        animation: row-tooltip-animation ease-in-out 300ms forwards;
    }
    &:hover {
        & span.tooltip {
            display: block;
        }
    }
    &[data-selected="true"] {
        & div.signature {
            & span.number {
                &::before {
                    position: absolute;
                    display: block;
                    content: '';
                    top: 6px;
                    bottom: 0;
                    left: -8px;
                    width: 4px;
                    height: 4px;
                    border-radius: 2px;
                    background: var(--scheme-color-accent);
                }
            }
        }
    }
    & div.signature {
        display: inline-block;
        position: sticky;
        white-space: nowrap;
        left:0;
        z-index: 1;
        background-color: var(--scheme-color-5);
        & span.icon{
            position: absolute;
            display: inline-block;
            right: 3px;
            top: -2px;
            font-size: 12px;
            width: 16px;
            height: 16px;
            color: var(--scheme-color-0);
            cursor: default;
        }
        & span.next-match-distance {
            position: relative;
            display: inline-block;
            user-select: none;
            margin-left: -7px;
            & span.codicon {
                font-size: 14px;
                padding-top: 2px;
                color: var(--scheme-color-0);
                cursor: default;
                &:hover{
                    color: var(--scheme-color-accent);
                }
            }
        }
        & span.error {
            position: absolute;
            display: inline-block;
            top: 2px;
            margin-left: -14px;
            color: var(--scheme-color-warning);
            font-size: 10px;
            line-height: 10px;
        }
        & span.source-name {
            display: inline-block;
            position: relative;
            font-family: 'console', monospace;
            width: 5rem;
            overflow: hidden;
            line-height: 16px;
            height: 16px;
            max-height: 16px;
            font-size: 10px;
            vertical-align: top;
            user-select: none;
            cursor: pointer;
        }
        & span.source-alias {
            display: inline-block;
            position: relative;
            width: 4px;
            line-height: 16px;
            height: 16px;
            max-height: 16px;
            vertical-align: top;
            user-select: none;
            cursor: pointer;
            &::after {
                background: inherit;
                position: absolute;
                display: block;
                height: 100%;
                top: 0;
                width: 0;
                left: 100%;
                content: attr(data-source-name);
                cursor: default;
                overflow: hidden;
                z-index: 1;
                font-size: 0.8rem;
                line-height: 0.9rem;
                color: var(--scheme-color-6);
                padding: 0 0.5rem;
                opacity: 0;
                pointer-events: none;
            }
            &:hover {
                &::after {
                    width: auto;
                    opacity: 1;
                }
            }
        }
        & span.number {
            display: inline-block;
            position: relative;
            font-family: 'console', monospace;
            font-variant-numeric: tabular-nums;
            line-height: 16px;
            height: 16px;
            max-height: 16px;
            font-size: 10px;
            vertical-align: top;
            margin: 0 8px;
            padding: 0 8px 0 0;
            border-right: thin var(--scheme-color-4) solid;
            cursor: default;
            color: var(--scheme-color-2);
            user-select: none;
            &[data-bookmarked="true"] {
                &::after {
                    position: absolute;
                    display: block;
                    content: '';
                    top: 0;
                    bottom: 0;
                    right: 0;
                    width: 4px;
                    background: var(--scheme-color-accent);
                }
                &:hover::after {
                    background: var(--scheme-color-accent-lighten-20);
                }
            }
            & span.filler {
                color: var(--scheme-color-4);
                font-variant-numeric: inherit;
                line-height: inherit;
                height: inherit;
                max-height: inherit;
                font-size: inherit;
                font-family: inherit;
                user-select: none;
            }
            & span.range {
                position: absolute;
                display: block;
                height: 100%;
                width: 4px;
                top: 0;
                right: -6px;
                border-style: solid;
                &.begin {
                    border-left-width: 2px;
                    border-top-width: 2px;
                    border-right: none;
                    border-bottom: none;
                    height: 100%;
                    width: 4px;
                    top: 50%;
                }
                &.end {
                    border-left-width: 2px;
                    border-bottom-width: 2px;
                    border-top: none;
                    border-right: none;
                    height: 100%;
                    width: 4px;
                    top: -50%;
                    &.nested {
                        height: 100%;
                        top: -50%;
                    }
                }
                &.middle {
                    border-left-width: 2px;
                    border-top: none;
                    border-right: none;
                    border-bottom: none;
                    height: 185%;
                    top: ~'calc(-50% + 2px);';
                }
                &.open {
                    width: 0;
                    height: 0;
                    border-right: none;
                    border-top: 4px solid transparent;
                    border-left: 8px solid var(--scheme-color-accent);
                    border-bottom: 4px solid transparent;
                    top: 4px;
                }
                &.opening {
                    border-width: 0;
                    border-top: none;
                    border-right: none;
                    border-bottom: none;
                }
            }
            &:hover::after {
                position: absolute;
                display: block;
                content: '';
                top: 0;
                bottom: 0;
                right: 0;
                width: 4px;
                background: var(--scheme-color-5-darken-5);
            }
        }
    }
    &.timeranges {
        & div.signature {
            & span.number {
                padding: 0 16px 0 0;
                margin-right: 12px;
            }
        }
    }
    &.bookmarked {
        & div.signature {
            & span.number {
                background: var(--scheme-color-warning);
                color: var(--scheme-color-7);
                &::after {
                    position: absolute;
                    display: block;
                    content: '';
                    top: 0;
                    bottom: 0;
                    left: -4px;
                    width: 4px;
                    background: var(--scheme-color-warning);
                }
            }
        }
    }
    &.selected {
        /*background: var(--scheme-color-3);*/
        &::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--scheme-color-0-fade-35);
            pointer-events: none;
        }
    }
    & p.row {
        display: inline-block;
        position: relative;
        padding: 0;
        margin: 0;
        line-height: 16px;
        height: 16px;
        max-height: 16px;
        white-space: nowrap;
        vertical-align: top;
        &.pending {
            width: 100%;
            background: var(--scheme-color-4);
            margin-top: 3px;
            line-height: 10px;
            height: 10px;
            max-height: 10px;
        }
    }
    @keyframes row-tooltip-animation {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
}
