//Base classes for Ecommerce

.product-thumbs__item.dw-mod:hover, 
.product-thumbs__item--active.dw-mod {
    border: 4px solid @layout-brand-color-two;
}

.make-sticker(@background-color, @design) {
    .background-color(@background-color);
    
    .mixin() when (@design = "rounded") {
	    border-radius: 5px 5px 5px 5px;
    }

    .mixin() when (@design = "ball") and not (@background-color = none) {
        &:not(.stickers-container__tag--micro) {
            position: relative;
            width: 100px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            z-index: @z-index-1;
            background-color: @background-color;
            text-align: center;
            border-radius: 200px;
            margin: @reflex-cell-spacing-md;
        }
    }

    .mixin;
}

/* 
    Sale stickers
*/

.stickers-container__tag--sale.dw-mod {
    .font-mixin(
        @ecommerce-sale-sticker-font-font-family-family,
        @ecommerce-sale-sticker-font-font-family-style,
        @ecommerce-sale-sticker-font-font-size,
        @ecommerce-sale-sticker-font-font-family-weight,
        @ecommerce-sale-sticker-font-line-height,
        @ecommerce-sale-sticker-font-font-color,
        @ecommerce-sale-sticker-font-casing
    );

    .make-sticker(
        @ecommerce-sale-sticker-background-color,
        @ecommerce-sale-sticker-design
    );
}

/* 
    New stickers
*/

.stickers-container__tag--new.dw-mod {
    .font-mixin(
        @ecommerce-new-sticker-font-font-family-family,
        @ecommerce-new-sticker-font-font-family-style,
        @ecommerce-new-sticker-font-font-size,
        @ecommerce-new-sticker-font-font-family-weight,
        @ecommerce-new-sticker-font-line-height,
        @ecommerce-new-sticker-font-font-color,
        @ecommerce-new-sticker-font-casing
    );

    .make-sticker(
        @ecommerce-new-sticker-background-color, 
        @ecommerce-new-sticker-design
    );
}

/*
    Custom sticker
*/

.stickers-container__tag--custom.dw-mod {
    .font-mixin(
        @ecommerce-custom-sticker-font-font-family-family, 
        @ecommerce-custom-sticker-font-font-family-style,
        @ecommerce-custom-sticker-font-font-size,
        @ecommerce-custom-sticker-font-font-family-weight,
        @ecommerce-custom-sticker-font-line-height,
        @ecommerce-custom-sticker-font-font-color,
        @ecommerce-custom-sticker-font-casing
    );

    .make-sticker(
        @ecommerce-custom-sticker-background-color,
        @ecommerce-custom-sticker-design
    );
}


//Receipt
.receipt__header.dw-mod {
    .receipt-header-mixin();
}

.receipt__header.dw-mod * {
    .receipt-header-color-mixin();
}

.receipt-header-mixin() when (@ecommerce-receipt-header-background-color = transparent) {
    background-color: @layout-brand-color-two !important;
}

.receipt-header-mixin() when not (@ecommerce-receipt-header-background-color = transparent) {
    background-color: @ecommerce-receipt-header-background-color !important;
}

.receipt-header-color-mixin() when not (@ecommerce-receipt-header-font-color = transparent) {
    color: @ecommerce-receipt-header-font-color !important;
}

//Product details
.product__top.dw-mod {
    .product__top-mixin();
} 

.product__top-mixin() when not (@product-page-top-background-color = transparent) {
    background-color: @product-page-top-background-color;   
} 

.product__top-mixin() when not (@product-page-top-font-color = transparent) {
    h1, p {
        color: @product-page-top-font-color; 
    } 

    .tabs__label, .product__description, .product__section, .item-number, .product__stock-delivery, .help-text, .product__variant-group-name {
        color: @product-page-top-font-color; 
    }

    .tabs__label:hover {
        color: @product-page-top-background-color;
        background-color: @product-page-top-font-color;
    }
} 


.product__price-actions-wrap.dw-mod {
    .product__price-actions-wrap-mixin();
} 

.product__price-actions-wrap-mixin() when not (@product-page-buy-section-alignment = "full") {
    .text-align(@product-page-buy-section-alignment);
}

.product__price-actions-flex-wrap.dw-mod {
    .product__price-actions-flex-wrap-mixin();
}

.product__price-actions-flex-wrap-mixin() when (@product-page-buy-section-alignment = "left") {
    justify-content: flex-start;
} 

.product__price-actions-flex-wrap-mixin() when (@product-page-buy-section-alignment = "right") {
    justify-content: flex-end;
} 

.product__price-actions-flex-wrap-mixin() when (@product-page-buy-section-alignment = "center") {
    justify-content: center;
} 

.product__price-actions-wrap-mixin() when (@product-page-buy-section-alignment = "full") {
    .product__price-points-buy-button.dw-mod {
        width: 100%;
    }

    .product__price-buy-button.dw-mod {
        flex: 999;
    }
} 

.product__stock-delivery.dw-mod {
    .text-align(@product-page-stock-alignment);
} 

.product__price-wrap.dw-mod {
    .text-align(@product-page-price-alignment);
}

.price--product-page.dw-mod {
    .font-mixin (
        @product-page-price-font-design-font-family-family,
        @product-page-price-font-design-font-family-style,
        @product-page-price-font-design-font-size,
        @product-page-price-font-design-font-family-weight,
        @product-page-price-font-design-line-height,
        @product-page-price-font-design-font-color,
        @product-page-price-font-design-casing
    );

    .price-product-page-mixin (
        @product-page-price-background-color,
        @product-page-price-border-color
    );
}

.price-product-page-mixin(@background-color, @border-color) {
    .mixin() when not (@background-color = transparent) {   
	    background-color: @background-color;
        display: inline-block;
    }

    .mixin() when not (@border-color = transparent) {   
	    border: 1px solid @border-color;
        display: inline-block;
    }

    .mixin;
}

.vat-price--product-page.dw-mod {
    .vat-price--product-page-mixin(); 
} 

.vat-price--product-page-mixin() when not (@product-page-price-font-design-font-size = none) {
    font-size: unit(@product-page-price-font-design-font-size * 0.8, px);
}   