<template>
    <div :class="`rates ${theme} LTR`">
        <v-icon color="yellow"> WMi-star</v-icon>
        <v-icon color="yellow"> WMi-star</v-icon>
        <v-icon color="yellow"> WMi-star</v-icon>
        <v-icon color="yellow"> WMi-star</v-icon>
        <v-icon color="yellow"> WMi-star-half-alt</v-icon>
        <div class="number En Bold yellow--text"> {{ rate }}% </div>
        <div class="total Fa Thin"> بر اساس <span class="En Bold"> {{ total_rates }} </span> بررسی </div>
    </div>
</template>

<script>
    export default {
        props: {
            theme:              { default: '' },
            rate:               { default: '' },
            total_rates:        { default: 'آیتم' },
        },
    };
</script>
<style lang="scss" scoped>
    .rates {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 3px;
    }
    .rates .number {
        margin-left: 5px;
        margin-top: 3px;
        font-size: 18px;
        line-height: 26px;
    }
    .rates .total {
        color: #777;
        font-size: 14px;
        margin-left: 15px;
        border-left: 1px solid #000;
        padding-left: 15px;
    }

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