@import "../styles/base/fn.wxss";
@import '../backdrop/index.wxss';

.@{wuxClassNamePrefix}-filterbar {
    position: relative;
    z-index: 1000;

    &__bd {
        display: flex;
        position: relative;
        background-color: #FAFAFA;
        padding: 11px 0;
        font-size: 14px;
        height: 50px;
        line-height: 24px;
        text-align: center;
        box-sizing: border-box;
        
        &:after {
            .setBottomLine(#D9D9D9)
        }
    }
    
    &__item {
        position: relative;
        display: block;
        flex: 1;
        padding: 0 5px;
        .ellipsis();
        
        &:after {
            .setRightLine(#D9D9D9);
            height: 50%;
            transform: scaleX(0.5) translateY(50%);
        }
    
        &--checked {
            color: #f15353;
        }
    }

    &__text {
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        max-width: 100%;
        .ellipsis();
    }

    &__item--has-icon &__text {
        padding-right: 20px;
    }

    &__icon {
        position: absolute;
        right: 0;
        top: 50%;
        width: 15px;
        height: 12px;
        margin-top: -6px;
        /*margin-left: 3px;*/
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    
        &--radio,
        &--checkbox {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAALlJREFUSMftkLEJhDAUhhMNDiGilTs4hp2VTUyRKZxDxUocwD2cwsbKCSSP/4o7mzuEeIdck6958B7h+whjDsef4WeHfu3Xfk2SfdqnffL9bwVBHuRBTqRCFapwWd7v4uwhRRRRlGUCAgLjiAYNGiGYLTOb2UxkNrOZTcrnchisf+Cg9Vqv9YqCg4PbhLzEiBEjllLXutb1p9g6wDrkovhywGlIhQoV51fFP9OlXdqlZXnM24UOx108ADefcethh+9CAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE3LTEyLTI2VDE2OjMwOjA5KzA4OjAwffqQjQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxNy0xMi0yNlQxNjozMDowOSswODowMAynKDEAAABjdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uX3lleXM2c2tkbDdpYWZ3MjkvJUU1JTgwJTkyJUU0JUI4JTg5JUU4JUE3JTkyLnN2Z0mmfcwAAAAASUVORK5CYII=);
        }
    
        &--sort {
            background-position: 0 -26px;
            background-size: 9px 36px;
            background-image: url(data:image/png;base64,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);
        }
    
        &--sort-desc {
            background-position: 0 2px;
        }
    
        &--sort-asc {
            background-position: 0 -12px;
        }
    
        &--filter {
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOEAYAAAB2v0DJAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAApRJREFUOMulVDFIclEY/e7NR69BSoniidbQFNTQUg1NkeESTUVNhQgZNDXYKA8rJERJEN+9KA1BQ0MEpg251BhFQ+HWlBRRJATPSN973z/I+4N+Htbv2e65557v3HPhEjbCRthIOAxBCELQ7ychEiIhTYMWgTu4gzs2G7rQha7d3eBMcCY4E4//I2RLbIktPTyEMYxhpLTVwSb2cA/3UBR5J+/knff3VjqKKUxhqliUSlJJKm1utjrYvEjtvfZee4/FjFvj1rjN5SwDOAvOgrMQCNA1ukbXenr4NJ/m0+n0bxtp6G02SZVUSc1mTf7J8+R58qyvNzVAREQkhClMYUosxkf5KB89OGisBcHqXNKX9CV97e2MMsro0RFf5It8MRpttUlQikpRKW5sMMYYYycn8fH4eHy8o8Pcb7xxVxdzMAdzXFwoOSWn5H5w09+Ci1zkYijEJtkkm1SUv/wwH+bDx8f8kB/yw+Xl//W3NVWcwzmc5/MQgQhEZNmksYxlLDudwo1wI9zk8yaf9qa9ae/QELVTO7UnEla2pEzKpPzy0jyAFaIQhSghdaxjHRFNevVs9Wz17O6usfJ6W26AztJZOmsY+pV+pV8RAm5wg9tan3nMPGYe+/u1klbSSgsLlr7zdJ7Oq+rPG+iDPugj5Dtdz9az9exXA1V/1V/1VyqiQ3SIjutrKzv9Ur/ULz8+mgbQZV3WZXMAIbACK7ACQLbIFtkiBHqhF3q/9PZT+6n9tFbTMlpGy1QqVr7ChDAhTFSrzRtAQMDXVxIhERJxudgze2bP+/swCIMw2N39PcDn2OfY55jHQwfoAB2Ym7OyNWRDNmRVJU0DfEPjo5maanxc29ttUpvUJvl8gUQgEUi8vf3W7w/ooDUn0eweYAAAACV0RVh0ZGF0ZTpjcmVhdGUAMjAxNy0xMi0yNlQxNjoyMzo1MiswODowMB2krtAAAAAldEVYdGRhdGU6bW9kaWZ5ADIwMTctMTItMjZUMTY6MjM6NTIrMDg6MDBs+RZsAAAATnRFWHRzdmc6YmFzZS11cmkAZmlsZTovLy9ob21lL2FkbWluL2ljb24tZm9udC90bXAvaWNvbl9zaW41b3JyOHQwdmVpcGI5L2ZpbHRlci5zdmfzJTbdAAAAAElFTkSuQmCC);
        }
    }

    &__select {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    &__pop {
        height: 100%;
        width: 90%;
        overflow: hidden;
        position: fixed;
        top: 0;
        left: 10%;
        z-index: 1010;
        background-color: #fff;
        box-sizing: border-box;
    }

    &__scroll-view {
        max-height: 270px;
    }
    
    &__pop &__scroll-view {
        max-height: none;
        height: 85%;
        height: calc(~"100% - 44px");
    }
    
    &__panel {
        padding: 0 15px;
        
        &:last-child {
            padding-bottom: 20px;
        }
    }

    &__panel-hd {
        padding-top: 20px;
        padding-bottom: 2px;
        color: #252525;
        font-size: 15px;
        overflow-x: hidden;
        display: flex;
        align-items: center;
    }
    
    &__panel-selected {
        .ellipsis();
        flex: 1;
        text-align: right;
        font-size: 13px;
        line-height: 24px;
        color: #f23030;
    }
    
    &__groups {
        overflow: hidden;
        font-size: 13px;
        margin: 0 -5px;
    }
    
    &__group {
        .ellipsis();
        position: relative;
        height: 32px;
        width: 33.3333%;
        color: #232326;
        margin-top: 10px;
        float: left;
        box-sizing: border-box;
        padding-left: 5px;
        padding-right: 5px;
    }
    
    &__radio,
    &__check,
    &__btn {
        .ellipsis();
        height: 32px;
        display: block;
        text-align: center;
        line-height: 32px;
        background-color: #f0f2f5;
        border-radius: 5px;
        border: 1px solid #f0f2f5;
        box-sizing: border-box;
    }
    
    &__radio,
    &__check {
        position: absolute;
        left: 5px;
        top: 0;
        width: 100%;
        width: calc(~"100% - 10px");
        opacity: 0;
    }

    &__btn--checked {
        border-color: #f23030;
        background-color: #fff;
        color: #f23030;
    }
}

.@{wuxClassNamePrefix}-filterbar__btns {
    height: 44px;
    display: -webkit-box;
    overflow: hidden;

    .@{wuxClassNamePrefix}-filterbar__btn {
        background-color: #fff;
        color: #252525;
        font-size: 16px;
        position: relative;
        display: -webkit-box;
        -webkit-box-flex: 1;
        -webkit-box-align: center;
        -webkit-box-pack: center;
        border: none;
        border-radius: 0;
        height: 44px;
        line-height: 44px;
    
        &:before {
            .setTopLine(#D9D9D9);
        }
    }
    
    .@{wuxClassNamePrefix}-filterbar__btn--danger {
        background-color: #f23030;
        color: #fff;
    
        &:before {
            display: none;
        }
    }
}