//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .filter-options-content {
        position: relative;
        padding: 14px 28px 18px !important;
        a {
            margin: 0;
            padding: 0 11px;
            &:hover{
                background: none;
            }
            .label {
                position: relative;
            }
            .label {
                margin-left: 8px;
            }
        }
        a.am_shopby_link_selected {
            .label:before {
                content: '\2713';
                color: @djo-blue;
                font-weight: 900;
                .lib-font-size(15);
                text-indent: 2px;
            }
        }
        input[type='checkbox'] + .amshopby-choice:before {
            border: 1px solid #c8c8c8;
            border-radius: 0;
            width: 20px;
            height: 20px;
            content: '';
            display: block;
            position: absolute;
            background: #ffffff;
            text-align: center;
            line-height: 20px;
            top: 4px;
            left: 8px;
        }
        .filter-content [class*='am-filter-item']:hover ~ .amshopby-choice:before {
            border-color: @djo-blue;
        }
        .amshopby-more-button {
            .lib-button();
            border: none;
            background: transparent;
            color: @djo-gray;
            letter-spacing: 0.07em;
            position: relative;
            padding: 14px 0 14px 0;
            margin-left: -5px;
            .lib-font-size(14);
            &:hover,
            &:focus,
            &:visited,
            &:active {
                border: none;
                box-shadow: none;
                color: @djo-gray !important;
                background: transparent;
                a {
                    color: @djo-gray !important;
                }
            }
        }
        .item {
            margin: 20px 0 !important;
        }
        .am-filter-items-category_ids .item {
            line-height: 1.3;
            margin: 14px 0 !important;
        }
        .am_shopby_filter_items_attr_size,
        .am_shopby_filter_items_attr_width {
            .item {
                display: inline-block;
                margin-bottom: 0 !important;
                margin-top: 0 !important;
                a {
                    .lib-font-size(12);
                    border: 1px solid #dadada;
                    color: #949494;
                    display: inline-block;
                    font-weight: 700;
                    height: 28px;
                    line-height: 28px;
                    min-width: 28px;
                    margin: 4px;
                    padding: 4px;
                    text-align: center;
                    &:hover,
                    &.am_shopby_link_selected {
                        outline: 1px solid #999;
                    }
                    input {
                        display: none;
                    }
                    .label {
                        margin-left: 0;
                        &::before {
                            content: none;
                        }
                    }
                }
            }
        }
    }

    .filter-options-title {
        background-color: #f8f8f8;
        padding: 14px 40px 14px 35px;
        border: solid #dbdfe1;
        border-width: 1px 0 1px 1px;
        &:first-child {
            border-top: 0;
        }
    }
    .filter-options-title:after {
        .lib-font-size(20);
        top: 11px;
        right: 20px;
        color: #bbbab6;
    }
    .filter-options-content {
        border-left: 1px solid #dbdfe1;
    }
    .filter-options-item {
        border: none;
        padding: 0;
        &.active {
            border: solid #dbdfe1;
            border-width: 0 0 1px 0;
            .filter-options-title {
                border: solid #dbdfe1;
                border-width: 1px 0 1px 1px;
                &:first-child {
                    border-top: 0;
                }
            }
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .filter-subtitle-desktop {
        display: none !important;
    }
    #layered-filter-block {
        margin-top: 54px;
    }
    .filter {
        .filter-current-subtitle {
            .lib-font-size(12);
            font-weight: normal;
            padding: 13px 20px;
            &::before {
                right: 25px;
                top: 13px;
                .lib-font-size(12);
            }
        }
        .filter-current {
            width: 90%;
            margin: 0 auto;
            border-radius: 30px;
            opacity: .5;
            line-height: 25px;
            border: 1px solid #4f4a47;
            &.active {
                padding-bottom: 35px;
                border-radius: 0;
            }
        }
        .filter-actions {
            margin-left: 30px;
            margin-right: 30px;
        }
    }
    .filter-options input[type='checkbox']:checked + .amshopby-choice:after {
        background-color: @djo-blue;
        border-radius: 0px;
        height: 20px;
        left: 8px;
        top: 3px;
        width: 20px;
    }
}


//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .filter {
        .filter-actions {
            padding: 0 0 13px 18px;
        }
        .filter-options-item {
            border-right: 1px solid #dbdfe1;
            margin-right: -1px;
        }
    }

    .filter-options-content {
        input[type='checkbox'] + .amshopby-choice:before {
            border-radius: 0;
            border: 1px solid #c8c8c8;
            height: 20px;
            left: -7px;
            line-height: 20px;
            top: -3px;
            width: 20px;
        }
    }
    .filter-options input[type='checkbox']:checked + .amshopby-choice:after {
        background-color: @djo-blue;
        border-radius: 0;
        height: 20px;
        left: -7px;
        top: -3px;
        width: 20px;
        background-size: 25px;
    }

    // put a gray background around this as the "new toolbar"
    .filter .block-subtitle {
        background-color: @djo-toolbar-bg-color;
        border: 1px solid @djo-toolbar-border-color;
        margin-bottom: 0;
        padding-bottom: 32px;
        padding-left: 35px;
        padding-top: 32px;
        margin-right: -1px;
    }
    .filter-subtitle-mobile {
        display: none;
    }
    .filter-actions,
    .filter-current .items {
        border-left: 1px solid #dbdfe1;
        margin-bottom: 0;
        padding: 5.5px 15px 1px 15px;
    }
}