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

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

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

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