<template>
  <div class="content">
    <div class="flex" :class="type === 'primary' ? 'content-sub' : ''">
      <div class="left flex flex-col flex-justify-between">
        <div :class="type === 'primary' ? 'dot1' : 'dot1-default'"></div>
        <div class="dot2"></div>
        <div :class="type === 'primary' ? 'dot3' : 'dot3-default'"></div>
      </div>
      <div>
        <div
          class="mid flex flex-center bold"
          :style="type === 'primary' ? 'color:white' : 'color:#868787'"
        >
          {{ title }}
        </div>
      </div>
      <div class="left flex flex-col flex-justify-between">
        <div :class="type === 'primary' ? 'dot4' : 'dot4-default'"></div>
        <div class="dot5"></div>
        <div :class="type === 'primary' ? 'dot6' : 'dot6-default'"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 65px;
  height: 22px;
  color: white;
  background-color: rgba(95, 174, 182, 0.1);
  backdrop-filter: blur(10px);

  .content-sub {
    width: 65px;
    height: 22px;
    color: white;
    background: radial-gradient(circle at 50% -20px, #5aa8b0, rgba(0, 0, 0, 0));
    backdrop-filter: blur(10px);
  }

  .mid {
    width: 50px;
    margin: 0 2px;
    border-top: #868787 solid 1px;
    border-bottom: #868787 solid 1px;
  }

  .left {
    height: 22.5px;

    .dot1 {
      width: 5px;
      border-left: #dc9245 solid 1px;
      border-top: #dc9245 solid 1px;
      height: 5px;
    }

    .dot1-default {
      width: 5px;
      border-left: #868787 solid 1px;
      border-top: #868787 solid 1px;
      height: 5px;
    }

    .dot2 {
      background-color: #868787;
      height: 5px;
      width: 1px;
    }

    .dot3 {
      border-left: #dc9245 solid 1px;
      border-bottom: #dc9245 solid 1px;
      height: 5px;
      width: 5px;
    }

    .dot3-default {
      border-left: #868787 solid 1px;
      border-bottom: #868787 solid 1px;
      height: 5px;
      width: 5px;
    }

    .dot4 {
      border-right: #dc9245 solid 1px;
      border-top: #dc9245 solid 1px;
      height: 5px;
      width: 5px;
    }

    .dot4-default {
      border-right: #868787 solid 1px;
      border-top: #868787 solid 1px;
      height: 5px;
      width: 5px;
    }

    .dot5 {
      border-right: #868787 solid 1px;
      height: 5px;
      width: 5px;
    }

    .dot6 {
      border-right: #dc9245 solid 1px;
      border-bottom: #dc9245 solid 1px;
      height: 5px;
      width: 5px;
    }

    .dot6-default {
      border-right: #868787 solid 1px;
      border-bottom: #868787 solid 1px;
      height: 5px;
      width: 5px;
    }
  }
}
</style>
