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


:host {
    display: flex;
    position: relative;
    flex-flow: row;
    padding: 3px 12px 5px 24px;
    overflow: hidden;
    height: 20px;
    cursor: default;
    width: calc(100% - 36px);
    &:hover{
        background: var(--scheme-color-5);
    }
    &.selected{
        background: var(--scheme-color-accent-fadeout-50);
    }
    span.icon {
        flex: 0;
        width: 18px;
        max-width: 18px;
        min-width: 18px;
        display: block;
        position: relative;
        margin: 2px 0 0 0;
        & .mat-icon{
            height: 18px;
            width: 18px;
            font-size: 18px;            
        }
    }
    span.request{
        flex: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 6px;
        color: var(--scheme-color-0);
        cursor: default;
    }
    &.cdk-drag-preview {
        box-sizing: border-box;
        box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
                    0 8px 10px 1px rgba(0, 0, 0, 0.14),
                    0 3px 14px 2px rgba(0, 0, 0, 0.12);
        font-size: 14px;
        line-height: 20px;
    }
    &.cdk-drag-placeholder {
        opacity: 0;
    }
    &.cdk-drag-animating {
        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
    }
}
