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

app-views-sde {
    position: relative;
    display: flex;
    align-items: center;
    padding: 6px;
    & div.container {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0;
        & button {
            margin-left: 6px;
            & > span.label {
                max-width: 128px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;    
            }
        }
        & span.prompt{
            color: var(--scheme-color-1);
            padding-left: 3px;
        }
    }
    & mat-progress-bar {
        position: absolute!important;
        bottom: 2px!important;
        height: 1px!important;
        width: calc(100% - 12px)!important;
    }
}

.app-views-sde-list {
    & button[mat-menu-item] {
        & div.source {
            position: relative;
            margin-top: -7px;
            & > span.marker {
                display: block;
                position: absolute;
                width: 2px;
                height: 24px;
                left: -9px;
                top: 7px;
                content: '';
            }    
            & > span {
                display: inline-block;
                height: 16px;
                line-height: 16px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 250px;
            }
            & > span.minor {
                position: relative;
                display: block;
                color: var(--scheme-color-3);
                font-size: 10px;
                margin-top: -8px;
                white-space: nowrap;
                direction: rtl;
                max-width: 200px;
            }    
        }
        // &[data-selected="true"] {
        //     &  div.source {
        //         &::before {
        //             display: block;
        //             position: absolute;
        //             width: 4px;
        //             height: 4px;
        //             border-radius: 2px;
        //             background: var(--scheme-color-accent);
        //             left: -9px;
        //             top: 7px;
        //             content: '';
        //         }    
        //     }
        // }
    }
    
}
