//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .swatch-opt,
    .bss-swatch-opt {
        margin: 0;
        text-align: left;
    }
    .swatch-attribute,
    .bss-swatch-attribute {
        margin-bottom: 4px;
        .swatch-attribute-label-container,
        .bss-swatch-attribute-label-container {
            text-align: left;
            .swatch-attribute-label,
            .bss-swatch-attribute-label {
                display: inline-block;
                font-weight: 700;
                margin: 0 2px 2px;
                text-transform: uppercase;
                &::after {
                    content: ":";
                }
            }
            .swatch-attribute-selected-option {
                color: @djo-gray;
                display: inline-block;
                padding-left: 7px;
                padding-right: 14px;
            }
            .bss-swatch-attribute-selected-option {
                color: @djo-gray;
                padding-right: 14px;
            }
        }
        .swatch-attribute-options,
        .bss-swatch-attribute-options {
            margin: 0;
            .swatch-option,
            .bss-swatch-option {
                display: inline-block;
                float: none;
                margin: 0 4px 4px;
                max-width: none;
                &:not(.disabled):hover {
                    // border-color: inherit;
                    // color: inherit;
                    // outline: none;
                    border-color: #fff;
                    color: @djo-gray;
                    outline: 1px solid #999;
                }
                &.color,
                &.image,
                &:not(.text) {
                    -webkit-appearance: none;
                       -moz-appearance: none;
                            appearance: none;
                    border-radius: 50%;
                    cursor: pointer;
                    height: 28px;
                    line-height: 28px;
                    min-width: 0;
                    outline: none;
                    vertical-align: middle;
                    width: 28px;
                    &.selected {
                        outline: 2px solid @djo-blue;
                    }
                }
                &.image {
                    background-size: 100% !important;
                }
                &.text {
                    background: transparent;
                    border-color: #dadada;
                    color: #949494;
                    font-size: 12px;
                    padding: 5px 9px;
                    &.selected {
                        background: #f8f8f8;
                        border-color: @djo-blue;
                        border-width: 2px;
                        color: @djo-gray;
                        outline: none;
                        padding: 4px 8px;
                    }
                }
                &.disabled::after {
                    background: linear-gradient(to left top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 1) 43%, rgba(255, 255, 255, 1) 46%, @djo-gray 47%,@djo-gray 53%, rgba(255, 255, 255, 1) 54%, rgba(255, 255, 255, 1) 57%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, 0) 100%);
                }
            }
        }
        // the swatches inside the layered navigation on the category page
        &.swatch-layered {
            .swatch-attribute-options {
                .swatch-option {
                    border-radius: 0;
                    margin: 4px;
                    padding: 4px;
                    &.text {
                        background: #fff;
                        border-color: #dadada;
                        color: #949494;
                        height: 28px;
                        line-height: 28px;
                        min-width: 28px;
                        &::after {
                            content: none;
                        }
                        &.selected {
                            background: #f8f8f8;
                            border-color: @djo-blue;
                            color: @djo-gray;
                            padding: 3px;
                        }
                    }
                }
            }
        }
    }
    .swatch-option-loading {
        content: "";
        &::after {
            content: url("../images/loader-2.gif");
            left: 0;
            margin-top: -60px;
            position: absolute;
            top: 50%;
            width: 100%;
        }
        img {
            display: none;
        }
    }
    .has-sticky-product-options {
        .swatch-option-tooltip {
            display: none !important;
        }
    }
}


//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m + 1) {
    // hide the swatch pop up on click on mobile and tablet devices
    .swatch-option-tooltip {
        display: none !important;
    }
}