<template>
    <div class="info-box" :class="theme">
        <div :class="'icon'"> <v-icon :color="textColor"> WMi-{{icon}} </v-icon></div>
        <div :class="'texts'">
            <div :class="`title Fa Bold ${textColor}--text`" v-if="title != ''"> {{ title }} </div>
            <div :class="`desc Fa Thin ${textColor}--text`" v-html="text" ></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "we-hint-text",
    props: {
        icon:               { default: 'info' },
        title:              { default: "" },
        text:               { default: " پسر خوب " },
        theme:              { default: "grey lighten-3 inline XS" },
        textColor:          { default: "black" }
    },
};
</script>
<style lang="scss" scoped>

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

.info-box .icon {
    display:flex;
    background-color: rgba(0, 0, 0, 0.1);
    padding:10px 20px;
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}
.info-box .icon .v-icon {
    line-height: 50px;
    font-size: 30px;
}

.info-box .texts {
    display:inline-block;
    padding:20px 20px;
    text-align: right;
    width: 100%
}

.info-box .texts .title {
    text-align: right;
    font-size: 16px;
}
.info-box.XS .texts .title {
    font-size: 14px;
}
.info-box .texts .desc {
    text-align: right;
    font-size: 12px;
    line-height: 20px;
}
.info-box.XS .texts .desc {
    font-size: 14px;
}
.info-box.inline .texts {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-right: 10px;
    line-height: 34px;
}
.info-box.inline .texts .desc {
    margin-right: 10px;
}

/*---------------------------------XS Size-------------------*/
.info-box.XS .icon .v-icon {
    line-height: 40px;
    font-size: 20px;
}
.info-box.XS .texts {
    padding:10px 10px;
}
.info-box.XS .icon {
    padding:5px 10px;
}


/* ---------------------------------Modifications--------------------------------- */
.info-box .texts, .info-box .icon i {
    color: #fff;
}

.info-box.LightGray .texts, .info-box.LightGray .icon i {
    color: #000;
}



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

