<template>
    <div class="Tile">
        <i v-if="icon" class="pre-icon" :class="[icon]"></i>
        <div class="Title">
            <span class="TitleFa Fa">{{ TitleFa }}</span><br>
            <span class="TitleEn En">{{ TitleEn }}</span>
        </div>
        <v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon>
        <!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> -->
    </div>
</template>
<script>
export default {
    props: {
        TitleFa : {default: ' عنوان بخش '},
        TitleEn : {default: ' Section Title '},
        icon : {default: null},
        hasDetail: {default: true}
    }
}
</script>
<style scoped>
.Tile {
    padding: 1em;
    padding-right: 20px;
    cursor: pointer;
    display: -webkit-inline-flex;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: color 1000ms;
    transition: color 1000ms;
    color: #383838;
    text-align: right;
}
.Tile:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
    transition: 300ms cubic-bezier(1, 0, 0, 1);
}
.Tile:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.Tile:hover, .Tile:hover .post-icon, .Tile:hover .TitleEn {
    color: #fff;
}
.Tile .pre-icon {
    padding-left: 10px;
}
.Tile .Title {
    padding-left: 10px;
}

.Tile .TitleFa {
    display: inline-block;
    font-size: 18px;
}
.Tile .TitleEn {
    display: inline-block;
    letter-spacing: 5px;
    font-size: 12px;
    color: #a29da9;
    -webkit-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}
.Tile .post-icon::before {
    margin-top: 0px;
}


.post-icon {
    font-size: 24px !important;
    margin-right: auto;
    color: #888;
    -webkit-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.Tile:hover .post-icon {
    transform: translateX(-4px);
}
</style>
