@import "./common/common";
@import "./common/iconfont";
@import "./common/util";
@import "./dropdown";
.selected {
    .dropdown-status .status {
        &>.selected-label {
            display: inline-block;
            border-radius: px2rem(3);
            border: px2rem(1) solid #DDD;
            background: #E8E8E8;
            margin: px2rem(3) px2rem(5) px2rem(3) 0;
            padding: px2rem(3) px2rem(5);
        }
    }
    .selected-items {
        overflow-x: hidden;
        overflow-y: auto;
        li {
            line-height: px2rem(20);
            clear: both;
            overflow: hidden;
            width: 100%;
            box-sizing: border-box;
            padding: px2rem(7) px2rem(10);
            .selected-item {
                float: left;
                display: inline-block;
                @include text-overflow;
                width: 80%;
            }
            &.checked .iconfont {
                color: rgba(14, 144, 210, 1);
            }
            .iconfont {
                float: right;
                font-size: px2rem(13);
                padding-left: px2rem(5);
                box-sizing: border-box;
                width: 20%;
                color: #AAA;
                text-align:center;
            }
            &.selected-group-header {
                border-bottom: px2rem(1) solid #E5E5E5;
                border-top: px2rem(1) solid #E5E5E5;
                background: #F8F8F8
            }
        }
    }
    &>.dropdown-content {
        padding:0;
        &::before,
        &::after {
            content: "";
            display: block;
            position: absolute;
            border-style: dashed dashed solid;
            border-color: transparent;
            border-image: none;
            border-width: 0 px2rem(8) px2rem(8);
            border-bottom-color: #555;
            position: absolute;
            top: px2rem(-8);
            left: px2rem(6);
            width: 0;
            height: 0;
        }
        &::after {
            border-bottom-color: #FFF;
            bottom: px2rem(-5);
        }
        &.active {
            margin-top: px2rem(10);
            overflow:visible;
            border: px2rem(1) solid #CCC;
            box-shadow: 0 px2rem(2) px2rem(4) 0 rgba(34, 36, 38, .12),
             0 px2rem(2) px2rem(10) 0 rgba(34, 36, 38, .08);
        }
    }
    .filter-input {
        position: relative;
        padding: px2rem(10);
        input {
            margin: 0;
            padding: px2rem(5) px2rem(20) px2rem(5) px2rem(5);
            outline: 0 none;
            width: 100%;
            box-sizing: border-box;
            line-height: px2rem(16);
            border: px2rem(1) solid #CCC;
            border-radius: px2rem(2);
            color: #888;
            &::focus {
                border-color: rgba(14, 144, 210, 1);
            }
        }
        .iconfont {
            position: absolute;
            display: block;
            width: px2rem(20);
            height: px2rem(20);
            color: #888;
            line-height: px2rem(20);
            top: px2rem(15);
            right: px2rem(11);
            font-size: px2rem(13);
        }
    }
}

.selected-slide {
    &.dropdown {
        position:static;
        &>button{
            .dropdown-status{
                @include text-overflow;
            }
        }
        .dropdown-content {
            background: #FFF;
            display:block;
            opacity: 0.5;
            bottom:-100%;
            left:0;
            right:0;
            position:fixed;
            box-shadow: 0 px2rem(2) px2rem(4) px2rem(4) rgba(34, 36, 38, .12),
             0 px2rem(2) px2rem(4) 0 rgba(34, 36, 38, .08);
            transition: all .2s ease-in-out;
            padding:px2rem(12) 0;
            &.active {
                overflow:visible;
                transition: all .2s ease-in-out;
                opacity: 1;
                bottom: 0;
            }
            &:before,&:after{
                display:none;
            }
            .slider {
                overflow: hidden;
                padding: px2rem(30) 0 px2rem(40) 0;
            }
            .slides {
                padding:px2rem(4);
                .slider:first-child {
                    transform: rotateX(0deg);
                }
                .slide {
                    display: block;
                    font-size: 0;
                    overflow: hidden;
                    clear: both;
                    &.prev {
                        transform: rotateX(0deg);
                    }
                    &.active {
                        & + .slide {
                            transform: rotateX(0deg);
                        }
                        &>span {
                            color: #333;
                            transform: rotateX(0deg);
                        }
                        &.pseudo-slide>span {
                            transition-duration: 0s;
                        }
                        border-top:px2rem(1) solid #DDD;
                        border-bottom:px2rem(1) solid #DDD;
                        background:#F8F8F8;
                    }
                    &>span {
                        display: block;
                        text-align: center;
                        width: 100%;
                        color: #AAA;
                        float: left;
                        font-size: px2rem(14);
                        line-height: px2rem(32);
                    }
                    &>span.iconfont{
                        display:none;
                    }
                    &.pseudo-slide>span {
                        transition-duration: 0s;
                    }
                }
            }
        }
    }
}