@import "mixins/mixins";
@import "common/var";

.pro-select-tags-list {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    &.singe-row {
        height: 28px;
        line-height: 28px;
        overflow: hidden;
    }

    .collapse-tigger{
        cursor: pointer;
        flex: 0 0 auto;
        text-align: right;
        cursor: pointer;
        line-height: 28px;
        height: 28px;
        padding: 0px 5px;
        font-size: 13px;
    }

    .el-tag {
        box-sizing: border-box;
        border-color: transparent;
        margin: 2px 0 2px 6px;
        background-color: #f0f2f5;
        display: flex;
        max-width: 100%;
        align-items: center;
        user-select: none;
        cursor: pointer;

    transition: all .3s cubic-bezier(.645,.045,.355,1);
        &:hover, &.selected {
            color: #fff;
            background-color: #409eff;
            border-color: #409eff;
            box-shadow: -1px 0 0 0 #8cc5ff;
        }
    }
}

.pro-select-tags--expanded:not(.pro-select-tags--popper) .pro-select-tags-list.singe-row{
    height: 0px;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.pro-select-tags--expanded.pro-select-tags--popper .pro-select-tags-list.singe-row{
   visibility: hidden
}
.pro-select-tags-collapse-panel--popper {
    background: #ffffff;
    border-bottom: 1px solid #e4e7ed;
    box-shadow: 0px 10px 10px -15px rgba(0, 0, 0, 0.5);
}
.el-form-item__content .pro-select-tags {
    display: inline-block;
}