<template>
  <div class="comment">
    <div class="input_comment width_common mb-2">
      <div class="box-area-input width_common">
        <textarea id="txtComment" class="block_input" placeholder="* Bình luận của bạn sẽ được biên tập trước khi đăng. Xin vui lòng gõ tiếng Việt có dấu"></textarea>
      </div>
    </div>
    <div class="mb-2">
      <button type="button" class="send-comment">
        Gửi bình luận
        <Icon name="ri:send-plane-2-fill"></Icon>
      </button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.comment {
  pointer-events: none;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.w-full {
  width: 100%;
}
.send-comment {
  padding: 0.5rem;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  background-color: #409eff;
  border: 1px solid;
  color: #fff;
}
.container {
  width: 100%;
  max-width: 80rem;
  &.h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
  }
}
.input_comment {
  padding: 0;
  margin-top: 10px;
  background: #fff;
  position: relative;
  width: 100%;
  border-radius: 5px;
  border-top: 1px solid #dedede;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}

.box-area-input {
  /* background: #f3f6f9; */
  border-radius: 4px;
  position: relative;
  padding: 5px 10px;
  border-left: 2px solid rgba(59, 130, 246, 1);
}

.input_comment textarea.block_input {
  height: 30px;
  font-size: 14px;
}
textarea::placeholder {
  color: #878a99;
}
.input_comment textarea.block_input {
  height: 58px;
  overflow: hidden;
  resize: none;
}

/* .box-area-input .block_input {
    background: #f7f7f7;
  } */

.input_comment textarea {
  background: #fff;
  border: none;
  width: 100%;
  height: 58px;
  overflow: hidden;
}
</style>
