$namespace: 'cs-';
@import '../../../node_modules/creative-patterns/packages/components/price-box/src/price-box';

.price-box {
    @include priceBox();

    .price {
        color: $colorCeruleanBlue;
        font-size: 1.51rem;

        &-label {
            display: none;
            font-size: 1.15rem;
            font-weight: 700;
            text-transform: uppercase;
            padding-bottom: 0.3rem;

            body:not(.page-product-bundle, .page-product-grouped)
                p:not(.price-from, .price-to)
                & {
                @extend .#{$namespace}visually-hidden;
            }
        }
    }

    .price-from,
    .price-to {
        display: inline-block;
    }

    .old-price {
        text-decoration: none;

        .price {
            font-size: 1rem;
            color: $colorDoveGray;
            margin-right: 0.7rem;
        }
    }

    .special-price {
        .price {
            padding-left: 0;
            color: $colorCrimson;
        }

        &.active {
            .price {
                padding-left: 0.4rem;
                color: $colorCrimson;
            }
        }
    }

    .price-from {
        margin-right: 1.5rem;
    }
}

.#{$namespace}price--pdp {
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 1px solid $colorAlto;

    .page-product-bundle & {
        padding-bottom: 0;
        padding-top: 0.5rem;
    }

    .price-box {
        display: flex;
        margin-top: 1.5rem;
        flex-direction: column;
    }

    .price {
        font-size: 2rem;
    }

    .special-price {
        margin: 0;
        order: 2;
    }

    .special-price .price {
        font-size: 2rem;
    }

    .old-price {
        transform: translateY(-0.3rem);
        color: $colorAlto;
        order: 1;
        text-decoration: none;
    }

    .old-price .price {
        font-size: 1.2rem !important; /* stylelint-disable-line declaration-no-important */
    }

    .page-product-grouped & {
        padding-bottom: 0;
    }
}

.minimal-price-link {
    margin-top: 0 !important;
    margin-right: 1.5rem;
    position: relative;

    &:after {
        color: $colorCeruleanBlue;
        display: block;
        content: '-';
        right: -1rem;
        top: 0;
        position: absolute;
    }
}

.catalog-category-view {
    .special-price,
    .#{$namespace}item-cloner--visible & {
        .price {
            color: $colorCrimson;
        }
    }
}