//
// Dependencies
// --------------------------------------------------

@import "global.less";
@import "popover.less";
@import "loader.less";

//
// Filters
// --------------------------------------------------

@color-filter-bg:                            #ECF0F1;
@color-filter-bg-active:                     #6AAB55;
@color-filter-border:                        #D7DBDD;
@color-filter-text:                          rgba(0,0,0,.6);
@color-filter-text-active:                   #000000;
@color-filter-items-bg:                      #fafafa;
@color-filter-items-bg-hover:                #4da7e8;

//
// Filters
// --------------------------------------------------

.control-filter {
    padding: 0 (@padding-standard / 2);
    color: @color-filter-text;
    background-color: @color-filter-bg;
    border-top: 1px solid @color-filter-border;
    border-bottom: 1px solid @color-filter-border;

    font-size: @font-size-base - 1;

    .custom-checkbox label {
        font-size: @font-size-base - 1;
        color: @color-filter-text;
    }

    a {
        text-decoration: none;
        color: @color-filter-text;
    }

    > .filter-scope {
        display: inline-block;
        padding: (@padding-standard / 2);

        .filter-label {
            margin-right: 5px;
        }

        .filter-setting {
            display: inline-block;
            margin-right: 5px;
            .transition(color 0.6s);
        }

        &:after {
            font-size: 14px;
            .icon(@angle-down);
        }

        &.active {
            .filter-setting {
                padding-left: 5px;
                padding-right: 5px;
                color: #FFF;
                background-color: @color-filter-bg-active;
                .border-radius(4px);
                .transition(~'color 1s, background-color 1s');
            }
        }

        &.checkbox {
            padding-left: 35px;
            &, label {
                margin-bottom: 0;
            }

            label {
                padding-left: 25px;
            }

            &:after {
                content: '';
            }
        }

        &:hover, &.active {
            &, &.custom-checkbox label {
                color: @color-filter-text-active;
            }

            .filter-label {
                color: @color-filter-text-active;
            }

            &.active .filter-setting {
                background-color: darken(@color-filter-bg-active, 5%);
            }
        }
    }

    > .filter-scope-date {
        display: inline-block;
        padding: (@padding-standard / 2);
        .filter-label {}
        .filter-setting {
            display: inline-block;
            .transition(color 0.6s);
        }

        &:after {
            font-size: 14px;
            .icon(@angle-down);
        }

        &.active {
            .filter-setting {
                padding-left: 5px;
                padding-right: 5px;
                color: #FFF;
                background-color: @color-filter-bg-active;
                .border-radius(4px);
                .transition(~'color 1s, background-color 1s');
            }
        }

        &:hover {
            color: #000;
            .filter-label { color: @color-filter-text; }
            &.active .filter-setting { background-color: darken(@color-filter-bg-active, 5%); }
        }
    }
}

.control-filter-popover {
    min-width: 275px;

    .filter-search {
        min-height: 36px;
        input {
            min-height: 36px;
            border: none;
            border-bottom: 1px solid @color-filter-border;
            .border-bottom-radius(0);
            .box-shadow(none);
            background-color: transparent;
        }

        .form-control.icon.search {
            background-position: right -81px;
        }

        .close {
            display: none;
        }
    }

    .filter-items, .filter-active-items {
        color: @color-filter-text;
        font-size: @font-size-base - 1;
        ul, li {
            list-style-type: none;
            margin:0;
            padding:0;
        }
        li {
            .transition(~'color 0.6s, background-color 0.3s');
        }
        a {
            text-decoration: none;
            color: @color-filter-text;
            display: block;
            padding: 7px 15px;

            &:before {
                margin-right: 8px;
                display: inline-block;
                vertical-align: baseline;
            }

            &:hover {
                background-color: @color-filter-items-bg-hover;
                color: #FFFFFF;
            }
        }
    }

    .filter-items {
        max-height: 135px;
        overflow: auto;

        background-color: @color-filter-items-bg;
        border-bottom: 1px solid @color-filter-border;
        a:before { .icon(@plus); }

        li.loading {
            padding: 7px;
            > span {
                display: block;
                height: 20px;
                width: 20px;
                background-image: url('@{loader-image-path}/loader-transparent.svg');
                background-size: 20px 20px;
                background-position: 50% 50%;
                .animation(spin 1s linear infinite);
            }
        }

        li.animate-enter { .animation(fadeInUp .5s); }
    }

    .filter-active-items {
        a:before { .icon(@times); }
        li.animate-enter { .animation(fadeInDown .5s); }
    }

    &.control-filter-date-popover {
        min-width: 190px;

        .filter-buttons {
            margin: 0;
            padding: 0;

            &:after {
                content: "";
                display: block;
                clear: both;
            }

            .btn {
                float: left;
                width: 100%;
                margin: 0;
                border-radius: 0;
                text-align: center;
            }
        }

        &.--range {
            .filter-buttons .btn {
                width: 50%;
            }
        }
    }
}

@media (max-width: @screen-xs) {
    .control-filter-popover {
        .filter-items {
            max-height: 200px;
        }
        .filter-search {
            input {
                padding-left: 36px;
                padding-right: 36px;
            }
            .form-control.icon.search {
                background-position: 0 -81px;
            }
            .close {
                width: 30px;
                display: block;
                position: absolute;
                top: 5px;
                right: 5px;
                font-size: 28px;
                z-index: @zindex-filter;
            }
        }
    }
}