@import 'imports';
/*******************************************************************************
* Sprites
*******************************************************************************/
// Default Magento sprite selectors - rwd/default
.icon-sprite,
.btn-remove2,
.ratings .rating-box,
.ratings .rating-box .rating,
.sorter > .sort-by .sort-by-switcher,
.sorter > .view-mode .grid,
.sorter > .view-mode .list,
.skip-nav .icon,
.skip-search .icon,                                         // mobile
#search_mini_form .search-button:before,                    // desktop
.skip-account .icon,
.skip-cart .icon,
.product-view .sharing-links a,
.review-summary-table .rating-box .rating-number:after,
.ratings .rating-box,
.ratings .rating-box .rating,
.ratings-table .rating-box,
.ratings-table .rating-box .rating {

}

/* Custom DO sprites */
%djo-sprite {
    background-image: url(../images/djo-sprites.png);
    background-repeat: no-repeat;
}
// render retina sprite file at 200%
// background-size needs to be updated whenever the sprite sheet changes size
// retina background size is 50% of actual sprite sheet dimensions
@media #{$mq-retina} {
    %djo-sprite {
        background-image: url(../images/djo-sprites@2x.png);
        background-position: -1px -10px;
        background-size: 150px 250px;
    }
}

// DO Sprites
%do-sprite {
    background-image: url(../images/do-sprites.png);
    content: '';
}
// render retina sprite file at 200%
// background-size needs to be updated whenever the sprite sheet changes size
// retina background size is 50% of actual sprite sheet dimensions
@media #{$mq-retina} {
    %do-sprite {
        background-image: url(../images/do-sprites@2x.png);
        background-size: 139px 225px;
    }
}

// Ratings stars - large
.ratings .rating-box,
.ratings-table .rating-box {
    @extend %djo-sprite;
    background-position: -1px -84px;
    height: 22px;
    width: 118px;
}
.ratings .rating-box .rating,
.ratings-table .rating-box .rating {
    @extend %djo-sprite;
    background-position: -1px -59px;
    height: 22px;
    width: 118px;
}
// Rating stars - small
.products-grid {
    .ratings .rating-box,
    .ratings-table .rating-box {
        @extend %djo-sprite;
        background-position: -1px -127px;
        height: 16px;
        width: 84px;
    }
    .ratings .rating-box .rating,
    .ratings-table .rating-box .rating {
        @extend %djo-sprite;
        background-position: -1px -109px;
        height: 16px;
        width: 84px;
    }
}
.review-summary-table .rating-box .rating-number:after {
    @extend %djo-sprite;
    background-position: -1px -109px;
    height: 16px;
    width: 16px;
}
.arar-rate-hld {
    .f-fullstar,
    .f-emptystar,
    .f-halfstar {
        @extend %djo-sprite;
        height: 18px;
        width: 18px;
    }
    .f-fullstar {
        background-position: -1px -109px;
    }
    .f-emptystar {
        background-position: -1px -127px;
    }
    .f-halfstar {
        background-position: -1px -109px;
    }
}
// Pager arrows
%pager-next {
    @extend %djo-sprite;
    background-position: -1px -146px;
    height: 18px;
    width: 10px;
}
%pager-next-hover {
    @extend %djo-sprite;
    background-position: -15px -146px;
    height: 18px;
    width: 10px;
}
.pager .next {
    &:before {
        @extend %pager-next;
    }
    &:hover:before {
        @extend %pager-next-hover;
    }
}
.pager .previous {
    &:before {
        @extend %pager-next;
        transform: scaleX(-1);
    }
    &:hover:before {
        @extend %pager-next-hover;
        transform: scaleX(-1);
    }
}
// Header - comparison link
.icon-comparison-link {
    @extend %djo-sprite;
    background-position: -125px -60px;
    display: inline-block;
    height: 20px;
    width: 15px;
}


/*******************************************************************************
* Layered Navigation
*******************************************************************************/
.block-layered-nav {
    #narrow-by-list {
        // Attribute title
        > dt {
            &:after {
                @extend %djo-sprite;
                background-position: -20px -193px;
                height: 20px;
                width: 22px;
            }
            &.amshopby-collapsed:after {
                background-position: -46px -193px;
            }
        }
        // Attribute values
        .amshopby-attr,
        .amshopby-attr-selected {
            &:before {
                @extend %djo-sprite;
            }
        }
        .amshopby-attr {
            &:before {
                background-position: -1px -192px;
                height: 15px;
                width: 15px;
            }
        }
        .amshopby-attr:active,
        .amshopby-attr:focus,
        .amshopby-attr-selected {
            &:before {
                background-position: -1px -216px;
                height: 17px;
                width: 19px;
            }
        }
    }
}


/*******************************************************************************
* Share Icons
*******************************************************************************/
.product-essential {
    .sharing-links {
        .link-email-friend {
            background-image: none;
            &:before {
                @extend %do-sprite;
                background-position: -85px -59px;
                height: 14px;
                width: 20px;
            }
        }
        .link-facebook {
            background-image: none;
            &:before {
                @extend %do-sprite;
                background-position: 0 -57px;
                height: 18px;
                width: 8px;
            }
        }
        .link-googleplus {
            background-image: none;
            &:before {
                @extend %do-sprite;
                background-position: -16px -58px;
                height: 18px;
                width: 19px;
            }
        }
        .link-pinterest {
            background-image: none;
            &:before {
                @extend %do-sprite;
                background-position: -40px -57px;
                height: 18px;
                width: 15px;
            }
        }
        .link-twitter {
            background-image: none;
            &:before {
                @extend %do-sprite;
                background-position: -63px -57px;
                height: 16px;
                width: 17px;
            }
        }
    }
}