.product-attribute-plus-swatch {
    margin: 0;
    display: block;
    padding: 0;
    li {
        display: inline-flex;
        flex-wrap: wrap;
        margin: 0 10px 0 0;
        position: relative;
        cursor: pointer;
        .product-attribute-plus-sw-wrap {
            @include flexCenter(row, center, center);
            border: 1px solid var(--product-attribute-plus-swatch-border-color);
            padding: 3px;
            line-height: 1;
            transition: all 0.3s linear;
            position: relative;
            span {
                @include flexCenter(row, center, center);
                width: 30px;
                height: 30px;
                position: relative;
                font-size: 14px;
                z-index: 2;
                color: #000000;
                img {
                    max-width: 100%;
                    width: auto;
                }
            }
        }
        &:hover {
            .product-attribute-plus-sw-wrap {
                border-color: var(--product-attribute-plus-swatch-hover-border-color);
            }
        }
        &.selected {
            z-index: 3;
            .product-attribute-plus-sw-wrap {
                border-color: var(--product-attribute-plus-swatch-active-border-color);
                transform: scale(1.1);
            }
        }
        &:last-child {
            margin-right: 0;
        }
    }
}

/* Radio Button Design */
.product-attribute-plus-swatch.pa-plus-radio {
    li {
        margin-right: 30px;
        .product-attribute-plus-sw-wrap {
            border: 0;
            span {
                position: relative;
                padding-left: 25px;
                width: auto;
                &:before, &:after {
                    content: "";
                    position: absolute;
                    width: 14px;
                    height: 14px;
                    border: 1px solid var(--product-attribute-plus-swatch-border-color);
                    left: 0;
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    border-radius: 30px;
                }
            }            
        }
        &.selected {            
            .product-attribute-plus-sw-wrap {
                transform: scale(1);
                span {
                    &:after {
                        left: 3px;
                        width: 8px;
                        height: 8px;
                        background: #000000;
                        border: 0;
                    }

                }                
            }
        }
    }
}

/* Shapes */
.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-rounded-square li {
    &:before, &:after {
        border-radius: 10px;
    }
    .product-attribute-plus-sw-wrap {
        border-radius: 10px;
        span {
            border-radius: 10px;
            img {
                border-radius: 10px;
            }
        }
    }
}


/* Star Shape */
.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-hexagon, .product-attribute-plus-swatch.product-attribute-plus-swatch-shape-rabbet, .product-attribute-plus-swatch.product-attribute-plus-swatch-shape-bevel, .product-attribute-plus-swatch.product-attribute-plus-swatch-shape-pentagon {
    li {
        .product-attribute-plus-sw-wrap {
            width: 36px;
            height: 36px;
            padding: 0;
            background: var(--product-attribute-plus-swatch-border-color);
            clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            &:before {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                width: 34px;
                height: 34px;
                background: #ffffff;
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
            span {
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
            &:hover {
                background: var(--product-attribute-plus-swatch-hover-border-color);
            }
        }
        &.selected {
            .product-attribute-plus-sw-wrap {
                background: var(--product-attribute-plus-swatch-active-border-color)
            }
        }
    }
}

.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-rabbet {
    li .product-attribute-plus-sw-wrap {
        clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%); 
        &:before {
            clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
        }
        span {
            clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
        }
    }
}

.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-bevel {
    li .product-attribute-plus-sw-wrap {
        clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); 
        &:before {
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        }
        span {
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        }
    }
}

.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-pentagon {
    li .product-attribute-plus-sw-wrap {
        clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 
        &:before {
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        }
        span {
            clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
        }
    }
}


.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-circle li {
    &:before, &:after {
        border-radius: 50%;
    }
    .product-attribute-plus-sw-wrap {
        border-radius: 50%;
        span {
            border-radius: 50%;
            img {
                border-radius: 50%;
            }
        }
    }
}


/* Swatch Size */
.product-attribute-plus-swatch {
    &.product-attribute-plus-swatch-size-tiny {
        .product-attribute-plus-sw-wrap span {
            width: 20px;
            height: 20px;
            font-size: 12px;
        }
        &.product-attribute-plus-swatch-shape-rounded-square li {
            &:before, &:after {
                border-radius: 5px;
            }
            .product-attribute-plus-sw-wrap {
                border-radius: 5px;
                span {
                    border-radius: 5px;
                    img {
                        border-radius: 5px;
                    }
                }
            }
        }
    }
    &.product-attribute-plus-swatch-size-medium {
        .product-attribute-plus-sw-wrap span {
            width: 35px;
            height: 35px;
            font-size: 16px;
        }
    }
    &.product-attribute-plus-swatch-size-large {
        .product-attribute-plus-sw-wrap span {
            width: 45px;
            height: 45px;
            font-size: 18px;
        }
    }
    &.product-attribute-plus-swatch-size-xlarge {
        .product-attribute-plus-sw-wrap span {
            width: 55px;
            height: 55px;
            font-size: 20px;
        }
    }
}

.product-attribute-plus-swatch.product-attribute-plus-swatch-shape-hexagon, .product-attribute-plus-swatch.product-attribute-plus-swatch-shape-rabbet, .product-attribute-plus-swatch.product-attribute-plus-swatch-shape-bevel, .product-attribute-plus-swatch.product-attribute-plus-swatch-shape-pentagon {
    &.product-attribute-plus-swatch-size-tiny li {
        .product-attribute-plus-sw-wrap {
            width: 26px;
            height: 26px;
            &:before {
                width: 24px;
                height: 24px;
            }  
        }
    }
    &.product-attribute-plus-swatch-size-medium li {
        .product-attribute-plus-sw-wrap {
            width: 41px;
            height: 41px;
            &:before {
                width: 39px;
                height: 39px;
            }  
        }
    }
    &.product-attribute-plus-swatch-size-large li {
        .product-attribute-plus-sw-wrap {
            width: 51px;
            height: 51px;
            &:before {
                width: 49px;
                height: 49px;
            }  
        }
    }
    &.product-attribute-plus-swatch-size-xlarge li {
        .product-attribute-plus-sw-wrap {
            width: 61px;
            height: 61px;
            &:before {
                width: 59px;
                height: 59px;
            }  
        }
    }
}


/* Disabled */
.product-attribute-plus-swatch li.product-attribute-plus-li-disabled {
    opacity: 0.8;
    z-index: 3;
}

.product-attribute-plus-swatch li.product-attribute-plus-li-disabled .product-attribute-plus-sw-wrap span {
    position: relative;
    &:before, &:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 70%;
        left: 50%;
        top: 15%;
        background: #ff0000;
        transform: rotate(45deg);
        z-index: 2;
    }
    &:after {
        transform: rotate(-45deg);
    }
}