<template>
    <div :class="`RTL text-lg-right section-title ${theme} ${(icon) ? 'icon-visible' : ''}`">
        <v-icon v-if="icon" :color="color">WMi-{{icon}}</v-icon>
        <div v-if="number" :class='"step En color-"+color+""' v-text="number"></div>
        <div class="Title">
            <div class="Fa" v-text="titleFa"></div>
            <div class="En" v-text="titleEn"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "section-title",
    props: {
        titleFa: { default: "عنوان بخش" },
        titleEn: { default: "Part Title" },
        color: { default: "cyan" },
        number: String,
        theme: String,
        icon: String,
    },
    data: function ()  {
        return {}
    },
};
</script>
<style lang="scss" scoped>
/* --------------------------------------------------------
                        SectionTitle :: Begin
-------------------------------------------------------- */
.section-title {
    display: flex;
    justify-content: right;
    align-items: center;
}

.section-title .step {
    font-size: 50px;
    opacity: 0.2;
    line-height: 60px;
}

.section-title .v-icon {
    font-size: 50px;
    opacity: 0.2;
}
.section-title.icon-ml-15 .v-icon {
    margin-left: 15px;
}


.section-title .Title {
    float: right;
    margin-right: -30px;
    margin-top: 8px;
}

.section-title .Title .Fa {
    font-size: 20px;
    line-height: 1.2;
}

.section-title .Title .En {
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-right: -5px;
    color: #afafaf;
}


.section-title.icon-visible .v-icon {
    opacity: 1;
}
.section-title.icon-visible .Title {
    margin-right: 0px;
    margin-top: 0px;
}
/* --------------------------------------------------------
                    SM Size :: Begin
-------------------------------------------------------- */
.section-title.sm .step {
    font-size: 45px;
    line-height: 55px;
}
.section-title.sm .Title .Fa {
    font-size: 18px;
    line-height: 20px;
}
.section-title.sm .Title .En {
    font-size: 10px;
 }
.section-title.sm .v-icon {
    font-size: 40px;
}

/* --------------------------------------------------------
                XS Size :: Begin
-------------------------------------------------------- */
.section-title.xs .step {
    font-size: 35px;
    line-height: 45px;
}
.section-title.xs .Title .Fa {
    font-size: 17px;
    line-height: 23px;
}
.section-title.xs .Title .En {
    font-size: 9px;
    line-height: 12px;
}
.section-title.xs .v-icon {
    font-size: 32px;
    margin-left: 5px;
}


</style>

