@import "compass";

%icon-glyph-facetResult {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
}

%facetRes-bloc-overflow {
    display: block;
    overflow: hidden;
}

.facet-search-mobile{
    display: none;
    overflow: hidden;

    .portlet-title{
        color:#4F7AD3;
        text-decoration: underline;
        @extend %facetRes-bloc-overflow;

        span{
            float:left;
            display: block;
            position: relative;
            padding-right: 15px;

            &:before{
                content: '';
                display: block;
                position: absolute;
                top: 5px;
                right:0;
                width: 0;
                height: 0;
                border: 5px solid transparent;
                border-left-color: #4F7AD3;
            }
        }
    }

    &.opened {
        .portlet-title {
            span:before{
                border-color:  #4F7AD3 transparent transparent transparent;
            }
        }

        .facet-actions{
            display:block;
        }
    }

    .facet-actions{
        display:none;
    }

    .menu-list {
        &.level0{
            margin: 0;
            padding: 10px 0;
            border: #CFCFCF 1px solid;
            border-left: 0;
            border-right: 0;
            background-color: #EEEEEE;
            position:relative;

            &:after {
                @extend %icon-glyph-facetResult;
                left: 20px;
                top: -1px;
                border-color: #FFF transparent transparent transparent;
                border-width: 5px;
            }

            &:before {
                @extend %icon-glyph-facetResult;
                left: 19px;
                top: 0;
                border-color: #CFCFCF transparent transparent transparent;
                border-width: 6px;
            }

            li{
                @extend %facetRes-bloc-overflow;
                margin:0 10px;

                h4{
                    float:left;
                }

                .control-group{
                    float:right;
                    width: 60%;
                    text-align: right;
                    select{
                        width:90%
                    }
                }
            }

        }
    }

    .form-buttons{
        @extend %facetRes-bloc-overflow;
        padding: 10px;
        background: #DDDDDD;
        border-bottom: #888888 1px solid;
        a{
            @extend %facetRes-bloc-overflow;
            float: left;
            padding:11px 0;
        }
        button{
            @extend %facetRes-bloc-overflow;
            float: right;
        }
    }
}

@media (max-width: 991px) {
    .facet-search-mobile{display: block}
}

@media (max-width: 991px) and (max-width: 991px) {
    .facet-search-mobile .form-buttons button{width:auto;}
}