<template>
  <span
    :class="`serenity__text ${action ? 'action' : ''}`"
    :style="
      `margin-left: ${ml}; margin-right: ${mr}; font-size: ${size}; font-weight: ${weight}; color: ${color}; text-align: ${align} display: ${
        align ? 'block' : ''
      }`
    "
    ><slot></slot
  ></span>
</template>

<script>
export default {
  props: {
    size: String,
    weight: String,
    color: String,
    align: String,
    action: Boolean,
    ml: String,
		mr: String,
  },
};
</script>

<style lang="scss" scoped>
.serenity__text {
  line-height: 140%;

  &.action {
    cursor: pointer;
  }
}
</style>
