%mg-minus-15 {
    margin-left: -15px;
    margin-right: -15px;
}

%pd-plus-15 {
    padding-left: 15px;
    padding-right: 15px;
}

%middle {
    display: inline-block;
    vertical-align: middle;
}

%text-opacity-hiden {
    visibility: hidden;
    opacity: 0;
}

%text-opacity-show {
    visibility: visible;
    opacity: 1;
}

%flex {
    display: flex;
    flex-wrap: wrap;
}

%flex-item-start {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

%flex-item-center {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

%flex-item-end {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

%row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

%cler {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

%txt-space {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


%border-white-opacity {
    border-color: rgba(#fff, .1);
}

%checkbox {
    content: '';
    @extend %middle;
    width: 20px;
    height: 20px;
    margin-right: 1.5rem;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    position: relative;
    cursor: pointer;
}

%product-box-label-left {
    margin-left: 0.6rem;
    top: 3px;
    left: auto !important;
    right: calc(100% + 10px);

    &:before {
        content: '';
        width: 0;
        height: 0;
        border-color: transparent transparent transparent #252525;
        border-width: 6px;
        border-style: solid;
        position: absolute;
        right: -12px;
        z-index: 3;
    }
}

%col-before-none {
    @media (max-width: 575px) {
        .col-12 {
            &:before {
                display: none;
            }
        }
        .col-6:nth-child(2n) {
            &:before {
                display: none;
            }
        }
        .col-4:nth-child(3n) {
            &:before {
                display: none;
            }
        }
        .col-3:nth-child(4n) {
            &:before {
                display: none;
            }
        }
    }
    @media screen and (min-width: 576px) and (max-width: 767px) {
        .col-sm-12 {
            &:before {
                display: none;
            }
        }
        .col-sm-6:nth-child(2n) {
            &:before {
                display: none;
            }
        }
        .col-sm-4:nth-child(3n) {
            &:before {
                display: none;
            }
        }
        .col-sm-3:nth-child(4n) {
            &:before {
                display: none;
            }
        }
    }
    @media screen and (min-width: 768px) and (max-width: 991px) {
        .col-md-12 {
            &:before {
                display: none;
            }
        }
        .col-md-6:nth-child(2n) {
            &:before {
                display: none;
            }
        }
        .col-md-4:nth-child(3n) {
            &:before {
                display: none;
            }
        }
        .col-md-3:nth-child(4n) {
            &:before {
                display: none;
            }
        }
    }
    @media screen and (min-width: 992px) and (max-width: 1199px) {
        .col-lg-12 {
            &:before {
                display: none;
            }
        }
        .col-lg-6:nth-child(2n) {
            &:before {
                display: none;
            }
        }
        .col-lg-4:nth-child(3n) {
            &:before {
                display: none;
            }
        }
        .col-lg-3:nth-child(4n) {
            &:before {
                display: none;
            }
        }
    }
    @media (min-width: 1200px) {
        .col-xl-12 {
            &:before {
                display: none;
            }
        }
        .col-xl-6:nth-child(2n) {
            &:before {
                display: none;
            }
        }
        .col-xl-4:nth-child(3n) {
            &:before {
                display: none;
            }
        }
        .col-xl-3:nth-child(4n) {
            &:before {
                display: none;
            }
        }
        .cols-xl-5:nth-child(5n) {
            &:before {
                display: none;
            }
        }
        .col-xl-2:nth-child(6n) {
            &:before {
                display: none;
            }
        }
    }
}

%attr-text-check-list {
    .attr-text-list {
        .attr-variation-checkbox {
            span {
                @extend %text-opacity-hiden;
                background: transparent !important;
                position: relative;

                &:before {
                    content: '\e9c1';
                    font-family: 'boxicons';
                    font-size: rem(12px);
                    line-height: 1;
                    margin-top: -6px;
                    margin-left: -6px;
                    @include position(absolute, 50%, null, null, 50%);
                }
            }
        }

        &:hover {
            .attr-variation-checkbox {
                span {
                    @extend %text-opacity-show;
                }
            }
        }
    }
}