<template>
    <div :class="`we-number ${theme}`">
        <div class="icon-and-number">
            <v-icon v-if="prepend_icon" class="prepend-icon">WMi-{{ prepend_icon}} </v-icon>
            <div class="number En Bold" v-html="number"></div>
            <v-icon v-if="append_icon" class="append-icon">WMi-{{ append_icon }} </v-icon>
        </div>
        <div class="label Fa" v-html="label"></div>
    </div>
</template>

<script>
    export default {
        props: {
            theme:                  { default: '' },
            number:                 { default: '' },
            label:                  { default: 'آیتم' },
            prepend_icon:           String,
            append_icon:            String,
        },
    };
</script>
<style lang="scss" scoped>
    .we-number {
        padding: 5px 10px;
        border-radius: 3px;
        border: 1px solid transparent;
    }

    .we-number .label {
        font-size: 12px;
        opacity: 0.7;
        text-align: left;
    }
    .we-number .icon-and-number {
        display: flex;
        justify-content: start;
        align-items: center;
    }
    .we-number.label-center .label {
        text-align: center;
    }
    .we-number.label-center .icon-and-number {
        justify-content: center;
        align-items: center;
    }



    /*----------------------------------------------------*/
    /*                Left Label                          */
    /*----------------------------------------------------*/
    .we-number.label-left {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .we-number.label-left .label {
        font-size: 14px;
        opacity: 0.7;
        text-align: right;
        line-height: 14px;
        margin-right: 3px;
    }

    /*----------------------------------------------------*/
    /*                Lg Size                             */
    /*----------------------------------------------------*/

    /*--------------default------------------------------------*/
    .we-number .number  {
        font-size: 30px;
        line-height: 20px;
    }
    .we-number .prepend-icon, .we-number .append-icon  {
        font-size: 18px;
        margin-right: -3px;
        margin-left: -3px;
    }


    /*--------------sm------------------------------------*/
    .we-number.sm .number {
        font-size: 25px;
        line-height: 15px;
    }
    /*--------------md------------------------------------*/
    .we-number.md .number {
        font-size: 40px;
        line-height: 25px;
    }
    /*--------------lg------------------------------------*/
    .we-number.lg .number {
        font-size: 50px;
        line-height: 35px;
    }
    .we-number.lg .prepend-icon, .we-number.lg .append-icon  {
        font-size: 28px;
        margin-right: -5px;
        margin-left: -5px;
    }
    /*--------------xl------------------------------------*/
    .we-number.xl .number {
        font-size: 60px;
        line-height: 45px;
    }
    .we-number.xl .prepend-icon, .we-number.xl .append-icon  {
        font-size: 32px;
        margin-right: -5px;
        margin-left: -5px;
    }
    /*--------------xxl------------------------------------*/
    .we-number.xxl .number {
        font-size: 80px;
        line-height: 65px;
    }
    .we-number.xxl.label-left .label {
        line-height: 15px;
    }

    /*----------------------------------------------------*/
    /*                Colors                              */
    /*----------------------------------------------------*/
    @import "resources/js/Global/scss/_vars.scss";
    @each $color,
    $value in $colors {
        .we-number.theme-#{$color},
        .we-number.theme-#{$color} .prepend-icon, .we-number.theme-#{$color} .append-icon {
            color: $value;
        }
        .we-number.border-#{$color} {
            border: 1px solid $value;
        }
        .we-number.border-left-#{$color} {
            border-left: 3px solid $value;
            border-radius: 0px 5px 5px 0px;
        }
    }
    @each $backgroundColor,
    $value in $backgrounds {
        .we-number.bg-#{$backgroundColor} {
            background-color: $value;
        }
    }
</style>
