<template>
  <div class='bk-divider' :class='textAlign' :style="{
        borderColor: color,
        borderWidth: height + 'px',
        borderStyle: line,
        color: textColor,
        fontSize: textSize + 'px'
      }">
    <div class='content'><slot></slot></div>
  </div>
</template>
<script>
export default {
  props: {
    textAlign: {
      type: String,
      default: () => 'center'
    },
    color: {
      type: String,
      default: () => '#ebedf0'
    },
    height: {
      type: [String, Number],
      default: () => '1'
    },
    textColor: {
      type: String,
      default: () => '#ccc'
    },
    textSize: {
      type: [String, Number],
      default: () => '12'
    },
    line: {
      type: String,
      default: () => 'solid'
    }
  },
  mounted () {
  },
  methods: {}
}
</script>

<style scoped>
.bk-divider {
  width: 100%;
  height: 0px;
  border-top: solid 1px #ebedf0;
  margin: 16px 0;
  display: flex;
  align-content: center;
  padding: 0 40px;
  color: #ccc;
  font-size: 26px;
}
.content {
  transform: translateY(-50%);
  background: #fff;
}
.center > div {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left > div{
  position: absolute;
  left: 40px;
}
.right > div {
  position: absolute;
  right: 40px;
}
</style>
