
.icon-featured {
    background-color: @skinColor;
}

// Featured Box
.featured-box {
    .icon-featured {
        background-color: @skinColor;
        &:after {
            border-color: @skinColor;
        }
    }
    .woocommerce &,
    .woocommerce-page & {
        h2,
        h3,
        h4 {
            color: @skinColor;
        }
    }
    .aio-icon-header h3.aio-icon-title {
        color: @skinColor;
    }
    .box-content {
        //border-top-color: @skinColor;
    }

    .wpb_heading {
        color: @skinColor;
    }
}

.featured-boxes-style-3 {
    .featured-box {
        .icon-featured {
            border-color: @skinColor;
            color: @skinColor;
        }
    }
}

.featured-boxes-style-4 {
    .featured-box {
        .icon-featured {
            border-color: @skinColor;
            color: @skinColor;
        }
    }
}

.featured-boxes-style-5,
.featured-boxes-style-6,
.featured-boxes-style-7,
.featured-boxes-style-8 {
    .featured-box {
        .icon-featured {
            color: @skinColor;
        }
    }
}

.featured-box-effect-2 {
    .icon-featured:after {
        box-shadow: 0 0 0 3px @skinColor;
    }
}

.featured-box-effect-3 {
    .icon-featured:after {
        box-shadow: 0 0 0 10px @skinColor;
    }
    &:hover {
        .icon-featured {
            background: @skinColor;
        }
    }
}

.feature-box {
    .feature-box-icon {
        background-color: @skinColor;
    }
    &.feature-box-style-2,
    &.feature-box-style-3,
    &.feature-box-style-4,
    &.feature-box-style-5,
    &.feature-box-style-6 {
        .feature-box-icon {
            i {
                color: @skinColor;
            }
        }
    }
    &.feature-box-style-3 {
        .feature-box-icon {
            border-color: @skinColor;
        }
    }
}



// Feature Box
.feature-box {
    .for(@colors-list); .-each(@value) {
        @name:  extract(@value, 1);
        @color:  extract(@value, 2);
        @color-inverse:  extract(@value, 3);
        .feature-box-icon {
            background-color: @color;
        }
        &.feature-box-@{name} {
            .feature-box-icon {
                i {
                    color: @color;
                }
            }
        }
    }
}



// Featured Box
.featured-box-primary {
    .icon-featured {
        background-color: @color-primary;
        &:after {
            border-color:  @color-primary;
        }
    }
    h4 {
        color: @color-primary;
    }
    .box-content {
        border-top-color: @color-primary;
    }
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .featured-box-@{name} {
        .icon-featured {
            background-color: @color;
        }
        h4 {
            color: @color;
        }
        .box-content {
            border-top-color: @color;
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);
    .featured-boxes-style-3 {
        .featured-box.featured-box-@{name} {
            .icon-featured {
                border-color: @color;
                color: @color;
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);
    .featured-boxes-style-4 {
        .featured-box.featured-box-@{name} {
            .icon-featured {
                border-color: @color;
                color: @color;
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);
    .featured-boxes-style-5 {
        .featured-box.featured-box-@{name} {
            .icon-featured {
                color: @color;
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);
    .featured-boxes-style-6 {
        .featured-box.featured-box-@{name} {
            .icon-featured {
                color: @color;
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);
    .featured-boxes-style-8 {
        .featured-box.featured-box-@{name} {
            .icon-featured {
                color: @color;
            }
        }
    }
}
}

// Featured Box - Effects
html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .featured-box-effect-2.featured-box-@{name} {
        .icon-featured:after {
            box-shadow: 0 0 0 3px @color;
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .featured-box-effect-3.featured-box-@{name} {
        .icon-featured:after {
            box-shadow: 0 0 0 10px @color;
        }
        &:hover {
            .icon-featured {
                background: @color !important;
            }
        }
    }
}
}

html {
    .for(@colors-list); .-each(@value) {
    @name:  extract(@value, 1);
    @color:  extract(@value, 2);
    @color-inverse:  extract(@value, 3);

    .featured-box-effect-7.featured-box-@{name} {
        .icon-featured:before {
            color: @color;
        }
    }
}
}