/**
 * RSX Framework
 * Copyright 2015 Bell Canada
 * 
 * Color selector widget.
 * Reference: http://rsxdeployment.azurewebsites.net/docs/widgets.html#widgets-color-selector
 *
 *
 *  1. Base
 *  2. See More Ellipses
 *      2.1. Product Listing
 */


/* 1. Base */
.rsx-color-selector {
    display: inline-block;
    position: relative;
    list-style: none;
    padding: 0;
    margin: 5px 0 0;
}

.rsx-color-selector li {
    display: block;
    float: left;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    margin-right: 16px;
    border: 1px solid #cacaca;
    border-radius: 50%;
    cursor: pointer;
    transition: box-shadow .15s cubic-bezier(.17, .67, .83, .67),
        width .5s cubic-bezier(.55, 0, .1, 1);
}
.rsx-color-selector.rsx-color-selector-static li{
    width: 13px;
    height: 13px;
}
.rsx-product-list-product-color-static-wrap {
    text-align: center;
}
.rsx-color-selector li.rsx-active {
    box-shadow: 0 0 0.3em 2px rgba(0, 102, 164, 1);
    border: 2px solid #fff;
}

.rsx-color-selector li:last-of-type {
    margin-right: 0;
}


@media (min-width: 520px) {
    .rsx-color-selector li {
        width: 22px;
        height: 22px;
        margin-right: 12px;
    }

    .rsx-color-selector li.rsx-active {
        box-shadow: 0 0 0.3em 2px rgba(0, 102, 164, 1);
    }
}

@media (min-width: 1000px) {
    .rsx-color-selector li {
        margin-right: 4px;
        margin-left: 4px;
    }
}




/* 2. See More Ellipses */
.rsx-color-selector:not(.rsx-color-selector_more) .rsx-color-selector-more {
    display: none;
}

.rsx-color-selector_more li.rsx-color-selector-more {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
    padding-top: 7px;
    border: 0;
    background-color: transparent;
    text-align: center;
    font-weight: bold;
}


/* 2.1. Product Listing */
@media (max-width: 519px) {
    .rsx-color-selector_more .rsx-color-selector-more:nth-of-type(-n+4),
    .rsx-color-selector_more li:not(.rsx-color-selector-more):nth-of-type(n+4) {
        display: none;
    }

    .rsx-color-selector_more li:not(.rsx-color-selector-more):nth-of-type(3) {
        margin-right: 0;
    }
}


@media (min-width: 520px) and (max-width: 1239px) {
    .rsx-color-selector_more .rsx-color-selector-more:nth-of-type(-n+7),
    .rsx-color-selector_more li:not(.rsx-color-selector-more):nth-of-type(n+7) {
        display: none;
    }

    .rsx-color-selector_more li:not(.rsx-color-selector-more):nth-of-type(6) {
        margin-right: 0;
    }
}


@media (min-width: 1240px) {
    .rsx-color-selector_more .rsx-color-selector-more:nth-of-type(-n+8),
    .rsx-color-selector_more li:not(.rsx-color-selector-more):nth-of-type(n+8) {
        display: none;
    }

    .rsx-color-selector_more li:not(.rsx-color-selector-more):nth-of-type(7) {
        margin-right: 0;
    }
}

.rsx-color-selector_custom li {
   outline:none !important;
}