<template >
</template>

<script>
export default {
  props: {
    color: { default: "hot" },
    text: { default: "عنوان" },
    secondaryText: { default: "title" },
    helpText: { default: null },
    helpUrl: { default: null }
  }
};
</script>

<style lang="scss">
.title {
  text-align: center;

  h3 {
    margin: 0 0 0.2em 0;
    color: #000;
    font-size: 1.5em;
  }

  .secondary {
    position: relative;
    .line {
      position: absolute;
      top: 50%;
      width: 100%;
      height: 1px;
    //   background-color: $color-hot;
      z-index: 1;

      .cold & {
        // background-color: $color-cold;
      }
    }

    h4 {
      z-index: 2;
      position: relative;
      background: #fff;
      padding: 0 1.5em;
      margin: 0;
      display: inline-block;
      font-size: 1em;

      span {
        padding: 0.2em 1em;
        // background: $color-hot;
        display: inline-block;
        border-radius: 0.2em;
        color: #fff;
        .cold & {
        //   background: $color-cold;
        }
      }
    }
  }

  .help {
    color: #5c6873;

    .btn {
      padding: 0 1em;
    }
  }
}
</style>
