/*
 *  Copyright 2016 Adobe Systems Incorporated
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */

@import "/apps/weretail/clientlibs/common/helpers.less";

.we-ProductFilter {
    display: block;

    padding-top: 2px;

    border-top: 1px solid fade(@gray-base, 10);

    margin-bottom: @padding-base-horizontal;

    &:first-of-type {
        margin-top: 36px;
    }

    &-header {
        .clearfix();

        padding-bottom: 2px;

        margin-bottom: @padding-small-horizontal;
    }

    &-name {
        display: inline-block;
        vertical-align: middle;

        font-weight: 700;
        font-size: @font-size-small;
        line-height: 2;

        text-transform: uppercase;
    }

    &-toggle {
        float: right;

        font-size: 11px;
        line-height: (24/11);
    }

    &-values {
        .clearfix();

        padding: 1px 0;
        max-height: 150px;
        overflow: auto;

        .radio,
        .radio-inline,
        .checkbox,
        .checkbox-inline {
            &:first-of-type:not(.we-Product-radio) {
                margin-top: 0;
            }

            label {
                font-weight: 400;
            }
        }

        .we-Product-radio {
            width: percentage(1/5);
            height: 0;

            padding-bottom: percentage(1/5);

            border: 1px solid transparent;

            &:nth-child(5n+1) {
                clear: left;
            }

            &.marker {
                input[type=checkbox]:checked::after {
                    height: 100%;
                }
            }

            label {
                height: 0;

                padding: 0 0 100% 100%;

                position: absolute;
                top: 0;
                left: 0;
            }

            input[type=checkbox] {
                width: 100%;
                height: 100%;

                margin-left: -100%;

                &:before {
                    content: '';

                    display: inline-block;

                    vertical-align: middle;

                    height: 100%;
                }
                &[name=product-color] {
                    background-color: transparent;
                }
            }
        }
    }

    &-status {
        font-weight: 600;
        color: @brand-primary;

        text-transform: uppercase;
    }

    &--sort {
        border-top: 0;

        margin: 35px 0;

        line-height: 24px;

        text-align: right;

        .dropdown {
            display: inline-block;

            font-weight: 600;
            color: @brand-primary;

            cursor: pointer;
        }
    }

    &--status {
        border-top: 0;

        padding: 35px 0;

        line-height: 24px;

        @media(max-width: @screen-sm-max) {
            text-align: center;
            background-color: #000;
            color: #fff;
            font-weight: 800;
            text-transform: uppercase;
            padding: 10px 0;
            margin: 0;
        }


    }

    @media(max-width: @screen-sm-max) {
        .checkbox input[type=checkbox] {
            background-color: rgba(255, 255, 255, 0.5);

            &:checked {
                background-color: @brand-primary;
            }
        }

        &-collapsible:first-of-type {
            display: block;
            margin: 0;
            padding: 20px;

            .product-filter-visible & {
                display: block;
            }
        }
    }
}