<template>
    <div :class="`we-quantity ${theme}`">
        <div class="icon"> <v-icon>  WMi-{{icon}} </v-icon> </div>
        <div class="label Fa">  {{label}} <br>  <span class="value Fa Bold"> {{value}} </span> </div>
    </div>
</template>

<script>
export default {
    props: {
        theme:           { default: 'theme-red' },
        label:          { default: " عنوان " },
        value:          { default: " مقدار " },
        icon:      { default: 'ok' },
    },
};
</script>
<style lang="scss" scoped>

    /*---------------------------------------------------------------*/
    /*                    Qunatity :: Begin*/
    /*---------------------------------------------------------------*/
    .we-quantity {
        transition: 0.2s;
        border: 1px solid transparent;
        border-radius: 5px;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .we-quantity .number {
        font-size: 60px;
        line-height: 45px;
    }
    .we-quantity .icon .v-icon {
        font-size: 40px;
        margin-left: -5px;
        line-height: 45px;
    }
    .we-quantity .label {
        font-size: 14px;
        opacity: 0.7;
        text-align: right;
        line-height: 16px;
        margin-right: 3px;
    }

    .we-quantity.sm .number {
        font-size: 50px;
        line-height: 40px;
    }

    .we-quantity.sm .label {
        font-size: 12px;
        opacity: 0.7;
        text-align: right;
        line-height: 14px;
        margin-right: 3px;
    }
    .we-quantity.xl .number {
        font-size: 70px;
        line-height: 60px;
    }

    .we-quantity.xl .label {
        font-size: 15px;
        opacity: 0.7;
        text-align: right;
        line-height: 18px;
        margin-right: 3px;
        margin-top: 4px;
    }


    .we-quantity.variation {
        padding: 5px 10px;
        background-color: #eeeeee;
        border-radius: 3px;
        color: var(--color-store-order);
    }


    /*---------------------------------------------------------------*/
    /*                    Qunatity :: End*/
    /*---------------------------------------------------------------*/
</style>
