<template lang="pug">
  .label-container(:style='labelColor')
    slot
</template>

<script>
export default {
  computed: {
    labelColor() {
      return {
        '--label-color': this.color,
        '--back-color': this.backColor
      }
    }
  },
  props: {
    color: {
      type: String,
      required: false,
      default: '#737985'
    },
    backColor: {
      type: String,
      required: false,
      default: '#F1F2F6'
    }
  }
}
</script>

<style lang="scss" scoped>
.label-container {
  align-items: center;
  background-color: var(--back-color);
  border-radius: 12px;
  color: var(--label-color);
  display: flex;
  font-size: 12px;
  height: 23px;
  justify-content: center;
  line-height: 15px;
  padding: 5px 10px;
}
</style>