<template>
    <div :class="`we-price ${theme}`">
        <div v-if="original_price && original_price != 0" class="discount">
            <div class="number-original En Bold" > {{ Intl.NumberFormat().format(original_price)  }} </div>
            <div class="percent En Bold"> 12 <v-icon color="white"> WMi-percentage</v-icon> </div>
        </div>
        <div class="number En Bold"> {{ Intl.NumberFormat().format(price)  }} </div>
        <div class="label Fa" v-html="label"></div>
    </div>
</template>

<script>
    export default {
        props: {
            theme:                  { default: '' },
            original_price:         String,
            price:                  { default: 1000 },
            label:                  { default: 'تومان' },
        },
    };
</script>
<style lang="scss" scoped>

    .we-price {
        transition: 0.2s;
        border: 1px solid transparent;
        border-radius: 5px;
        text-align: center;
        padding: 5px 15px;
    }
    .we-price .number {
        font-size: 25px;
        line-height: 20px;
    }

    .we-price .discount {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 3px;
    }
    .we-price .discount .percent {
        background-color: var(--color-red);
        border-radius: 5px;
        border-top-left-radius: 0px;
        padding: 0px 5px 0px 2px;
        color: var(--color-white);
        font-size: 14px;
    }
    .we-price .discount .percent .v-icon {
        margin-top: -3px;
        margin-right: -5px;
        font-size: 12px;
    }
    .we-price .number-original {
        font-size: 12px;
        line-height: 10px;
        color: var(--color-red);
        text-decoration: line-through;
        text-align: right;
    }

    .we-price .label {
        font-size: 12px;
        opacity: 0.7;
        text-align: left;
    }

    /*----------------------------------------------------*/
    /*                Misc                                */
    /*----------------------------------------------------*/
    .we-price.line-through .number {
        text-decoration: line-through;
    }
    .we-price.label-left {
        display: flex;
        align-items: baseline;
    }

    /*----------------------------------------------------*/
    /*                Lg Size                             */
    /*----------------------------------------------------*/
    .we-price.lg .number {
        font-size: 32px;
        line-height: 25px;
    }

    /*----------------------------------------------------*/
    /*                SM Size                             */
    /*----------------------------------------------------*/
    .we-price.sm .number {
        font-size: 20px;
        line-height: 15px;
    }
    .we-price.sm .percent {
        display: none;
    }
    .we-price.sm .label {
        font-size: 11px;
        line-height: 10px;
        margin-top: 2px;
        display: none;
    }



    /*----------------------------------------------------*/
    /*                Colors                              */
    /*----------------------------------------------------*/
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .we-price.bg-#{$color} {
            background-color: $value;
        }
    }


</style>
