<template>
    <div class="InfoBox" :class="color">
        <div :class="'Icon '+textColor+'--text'"> <v-icon> WMi-{{icon}} </v-icon></div>
        <div :class="'Text '+textColor+'--text'"><div class="Title"> {{ title }} </div> {{ text }}</div>
    </div>
</template>

<script>
export default {
    name: "wm-hint-text",
    props: {
        icon:               { default: 'info' },
        title:              { default: " عنوان " },
        text:               { default: " پسر خوب " },
        color:              { default: "red" },
        textColor:          { default: "black" }
    },
};
</script>
<style lang="scss" scoped>

/* --------------------------------------------------------
                        Info Box :: Begin
-------------------------------------------------------- */
.InfoBox {
    display:flex;
    color:#fff;
    border-radius: 10px;
}

.InfoBox .Icon {
    display:inline-block;
    background-color: rgba(0, 0, 0, 0.1);
    padding:10px 20px;
    border-radius: 10px;
}
.InfoBox .Icon .v-icon {
    line-height: 50px;
    font-size: 30px;
}
.InfoBox .Text {
    display:inline-block;
    padding:10px 30px;
    text-align: right;
    width: 100%
}
.InfoBox .Text .Title {
    text-align: right;
    font-size: 24px;
    width: 100%
}

/* ---------------------------------Modifications--------------------------------- */
.InfoBox.LightGray .Text, .InfoBox.LightGray .Icon i {
    color: #000;
}


/* --------------------------------------------------------
                        Info Box :: End
-------------------------------------------------------- */
</style>

