// /**
//  * Copyright © Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@swatch-attribute-option__selected__color: #646464;

@swatch-option__background: @color-gray94;
@swatch-option__border: @border-width__base solid #dadada;

@swatch-option__hover__border: @border-width__base solid @color-white;
@swatch-option__hover__color: @color-gray20;
@swatch-option__hover__outline: 1px solid @color-gray60;

@swatch-more__hover__border: @border-width__base solid @color-white;
@swatch-more__hover__color: @color-orange-red1;
@swatch-more__hover__outline: 1px solid @color-gray60;

@swatch-option__selected__border: @swatch-option__hover__border;
@swatch-option__selected__color: @swatch-option__hover__color;
@swatch-option__selected__outline: 2px solid @active__color;

@swatch-option__disabled__background: @color-red10;

//  Text attributes
@swatch-option-text__background: @swatch-option__background;
@swatch-option-text__color: #686868;

@swatch-option-text__selected__background-color: @color-white;

//  Size and Manufacturer attributes
@attr-swatch-option__background: @swatch-option__background;
@attr-swatch-option__color: #949494;

@attr-swatch-option__selected__background: @color-white;
@attr-swatch-option__selected__border: @border-width__base solid @color-white;
@attr-swatch-option__selected__color: @color-black;

//  Image and Color swatch
@img-color-swatch-option__hover__border: @swatch-option__hover__border;
@img-color-swatch-option__hover__outline: 2px solid darken(@active__color, 12%);

//  Tooltip
@swatch-option-tooltip__background: @color-white;
@swatch-option-tooltip__border: @swatch-option__border;
@swatch-option-tooltip__color: #949494;

@swatch-option-tooltip-title__color: #282828;

@swatch-option-tooltip-layered__background: @swatch-option-tooltip__background;
@swatch-option-tooltip-layered__border: @swatch-option__border;
@swatch-option-tooltip-layered__color: @swatch-option-tooltip__color;

@swatch-option-tooltip-layered-title__color: @swatch-option-tooltip-title__color;

//  Layered Features
@swatch-option-link-layered__focus__box-shadow: 0 0 3px 1px @focus__color;

//
//  Common
//  _____________________________________________

& when (@media-common =true) {

    .swatch {
        &-attribute {
            &-label {
                font-weight: @font-weight__bold;
                position: relative;

                &.required {
                    padding-right: @indent__s;
                }

                &[data-required='1']:after {
                    .lib-css(color, @form-field-label-asterisk__color);
                    content: '*';
                    font-size: @font-size__base;
                    font-weight: @font-weight__bold;
                    position: absolute;
                    right: -11px;
                    top: -2px;
                }
            }

            &-selected-option {
                .lib-css(color, @swatch-attribute-option__selected__color);
                padding-left: 17px;
            }

            &-options {
                margin: 0;

                &:focus {
                    box-shadow: none;
                }

                .swatch-option-tooltip-layered .title {
                    .lib-css(color, @swatch-option-tooltip-layered-title__color);
                    bottom: -5px;
                    height: 20px;
                    left: 0;
                    margin-bottom: @indent__s;
                    position: absolute;
                    text-align: center;
                    width: 100%;
                }
            }

            &.size,
            &.manufacturer {
                .swatch-option {
                    .lib-css(background, @attr-swatch-option__background);
                    .lib-css(color, @attr-swatch-option__color);

                    &.selected {
                        .lib-css(background, @attr-swatch-option__selected__background);
                        .lib-css(border, @attr-swatch-option__selected__border);
                        .lib-css(color, @attr-swatch-option__selected__color);
                    }
                }
            }
        }

        &-option {
            cursor: pointer;
            float: left;
            height: 24px;
            margin: 5px 6px 0 0;
            min-width: 24px;
            overflow: hidden;
            padding: 0;
            position: relative;
            text-align: center;
            font-size: 13px;
            text-overflow: ellipsis;
            border-radius: 50%;
            transition: all 300ms;
            border: 1px solid var(--thim-mgs-color-03, #ddd);

            &:focus {
                box-shadow: @focus__box-shadow;
            }

            &.text {
                background: transparent !important;
                color: #686868;
                font-size: 12px;
                font-weight: 400;
                line-height: 24px;
                margin-right: 7px;
                min-width: 22px;
                height: 24px;
                padding: 0 15px;
                border-radius: 20px;
                border: 1px solid #ccc;
                margin-top: 10px;
                transition: .3s;

                &.selected {
                    .lib-css(background-color, @swatch-option-text__selected__background-color) !important;
                }
            }

            &.selected {
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
                .lib-css(color, @swatch-option__selected__color);
            }

            &:not(.disabled):hover {
                .lib-css(color, #333);
                box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
            }

            &.image,
            &.color {
                &:not(.disabled):hover {
                    .lib-css(border, @img-color-swatch-option__hover__border);
                    .lib-css(outline, @img-color-swatch-option__hover__outline);
                }
            }

            &.image {
                border-radius: 0;
            }


            &.disabled {
                box-shadow: unset;
                cursor: default;
                pointer-events: none;

                &:after {
                    //  ToDo: improve .lib-background-gradient() to support diagonal gradient
                    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%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 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%);
                    background: -moz-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%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 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%);
                    background: -ms-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%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 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%);
                    background: -o-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%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 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%);
                    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(42%, rgba(255, 255, 255, 0)), color-stop(43%, rgba(255, 255, 255, 1)), color-stop(46%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(255, 82, 22, 1)), color-stop(53%, rgba(255, 82, 22, 1)), color-stop(54%, rgba(255, 255, 255, 1)), color-stop(57%, rgba(255, 255, 255, 1)), color-stop(58%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
                    background: -webkit-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%, rgba(255, 82, 22, 1) 47%, rgba(255, 82, 22, 1) 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%);
                    bottom: 0;
                    content: '';
                    filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#00ffffff, GradientType=1)';
                    left: 0;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }

            &-disabled {
                border: 0;
                cursor: default;
                outline: none !important;

                &:after {
                    .lib-rotate(-30deg);
                    content: '';
                    height: 2px;
                    left: -4px;
                    position: absolute;
                    top: 10px;
                    width: 42px;
                    z-index: 995;
                    .lib-css(background, @swatch-option__disabled__background);
                }
            }

            &-loading {}

            &-tooltip {
                .lib-css(border, @swatch-option-tooltip__border);
                .lib-css(color, @swatch-option-tooltip__color);
                display: none;
                max-height: 100%;
                min-height: 20px;
                min-width: 20px;
                padding: 5px 10px;
                position: absolute;
                text-align: center;
                z-index: 999;
                .lib-css(background, @swatch-option-tooltip__background);
                border-radius: 5px;

                &,
                &-layered {
                    .corner {
                        bottom: 0;
                        height: 8px;
                        left: 40%;
                        position: absolute;

                        &:before,
                        &:after {
                            border-style: solid;
                            content: '';
                            font-size: 1px;
                            height: 0;
                            position: relative;
                            width: 0;
                        }

                        &:before {
                            border-color: @color-gray68 transparent transparent transparent;
                            border-width: 8px 8.5px 0 8.5px;
                            left: 6px;
                            top: 0px;
                        }

                        &:after {
                            border-color: @color-white transparent transparent transparent;
                            border-width: 7px 7.5px 0 7.5px;
                            left: -10px;
                            top: -2px;
                        }
                    }

                    .image {
                        display: block;
                        height: 130px;
                        margin: 0 auto;
                        width: 130px;
                    }
                }

                &-layered {
                    .lib-css(border, @swatch-option-tooltip-layered__border);
                    .lib-css(color, @swatch-option-tooltip-layered__color);
                    .lib-css(background, @swatch-option-tooltip-layered__background);
                    display: none;
                    left: -47px;
                    position: absolute;
                    width: 140px;
                    z-index: 999;
                }

                .title {
                    .lib-css(color, @swatch-option-tooltip-title__color);
                    display: block;
                    max-height: 200px;
                    min-height: 20px;
                    overflow: hidden;
                    text-align: center;
                }
            }

            &-link-layered {
                margin: 0 !important;
                padding: 0 !important;
                position: relative;

                &:focus>div {
                    .lib-css(box-shadow, @swatch-option-link-layered__focus__box-shadow);
                }

                &:hover>.swatch-option-tooltip-layered {
                    display: block;
                }
            }

            &.image:not(.disabled):hover,
            &.color:not(.disabled):hover {
                border: none;
                outline: none;
                box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15)
            }
        }

        &-opt {
            margin: @indent__base 0;

            &-listing {
                margin-bottom: @indent__s;
            }
        }

        &-more {
            display: inline-block;
            margin: 2px 0;
            padding: 2px;
            position: static;
            z-index: 1;
        }

        &-visual-tooltip-layered {
            height: 160px;
            top: -170px;
        }

        &-textual-tooltip-layered {
            height: 30px;
            top: -40px;
        }

        &-input {
            left: -1000px;
            position: absolute;
            visibility: hidden;
        }
    }

    .clearfix:after {
        clear: both;
        content: '';
        display: block;
        height: 0;
        visibility: hidden;
    }

    .product-add-form {
        .product-options-wrapper {
            .swatch-opt {
                .swatch-attribute-label {
                    margin-bottom: 10px;
                    display: inline-block;
                    font-size: 14px;
                    color: var(--thim-mgs-color-01);
                    line-height: 1;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: .5px;

                    &:after {
                        content: ":";
                        display: inline-block;
                        margin-left: 1px;
                    }
                }

                .swatch-attribute&+.swatch-attribute {
                    padding-top: 14px;
                }

                .swatch-attribute {
                    .swatch-attribute-options {
                        .swatch-option.text {
                            background: transparent;
                            border: 1px solid #ccc;
                            color: #949494;
                            font-size: 12px;
                            font-weight: 400;
                            line-height: 28px;
                            margin-right: 7px;
                            min-width: 28px;
                            padding: 0 20px;
                            height: 28px;
                            border-radius: 20px;
                            transition: .3s;
                        }
                    }
                }
            }
        }
    }

}