EN TR
<div class="component--feedback style1 position-tc">
	<a href="#" class="close-btn">
		<img src="img/icon-close.svg" alt="">
	</a>
	<h6>How likely are you to answer to this question?</h6>
	<ul class="labels label-icons">
		<li>
			<input type="radio" name="rate" value="-1">
			<img src="img/icon-sad.svg" alt="">
		</li>
		<li>
			<input type="radio" name="rate" value="0">
			<img src="img/icon-thinking.svg" alt="">
		</li>
		<li>
			<input type="radio" name="rate" value="1">
			<img src="img/icon-happy.svg" alt="">
		</li>
	</ul>
	<div class="message">
		<p>Tell us how we can improve</p>
		<textarea name="message" cols="30" rows="10" placeholder="Write your message here"></textarea>
	</div>
	<div class="actions">
		<a href="#">Skip</a>
		<button type="submit">Submit</button>
	</div>
</div>

<div class="component--feedback style2 position-bc">
	<a href="#" class="close-btn">
		<img src="img/icon-close.svg" alt="">
	</a>
	<h6>How likely are you to answer to this <br> question?</h6>
	<ul class="labels label-numbers">
		<li>
			<input type="radio" name="rate" value="0">0
		</li>
		<li>
			<input type="radio" name="rate" value="0">1
		</li>
		<li>
			<input type="radio" name="rate" value="0">2
		</li>
		<li>
			<input type="radio" name="rate" value="0">3
		</li>
		<li>
			<input type="radio" name="rate" value="0">4
		</li>
		<li>
			<input type="radio" name="rate" value="0">5
		</li>
		<li>
			<input type="radio" name="rate" value="0">6
		</li>
		<li>
			<input type="radio" name="rate" value="0">7
		</li>
		<li>
			<input type="radio" name="rate" value="0">8
		</li>
		<li>
			<input type="radio" name="rate" value="0">9
		</li>
		<li>
			<input type="radio" name="rate" value="0">10
		</li>
	</ul>
	<div class="labels-text">
		<span>Not likely at all</span>
		<span>Extremely likely</span>
	</div>
	<div class="message">
		<p>Tell us how we can improve</p>
		<textarea name="message" cols="30" rows="10" placeholder="Write your message here"></textarea>
	</div>
	<div class="actions">
		<a href="#">Skip</a>
		<button type="submit">Submit</button>
	</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Open Sans', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background-color: #F7F9FD;
}

.component {
  &--feedback {
    background-color: #fff;
    padding: 30px 25px;
    box-shadow: 0 24px 27px -15px rgba(#3457DC, .13);
    position: fixed;
    transition: 300ms all;

    &.hide {
      opacity: 0;
      visibility: hidden;
    }

    &.position-bc {
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
    }

    &.position-bl {
      bottom: 20px;
      left: 20px;
    }

    &.position-br {
      bottom: 20px;
      right: 20px;
    }

    &.position-tc {
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
    }

    &.position-tl {
      top: 20px;
      left: 20px;
    }

    &.position-tr {
      top: 20px;
      right: 20px;
    }

    &.position-c {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    &.style1 {
      width: 380px;
    }

    .close-btn {
      position: absolute;
      top: 20px;
      right: 20px;
    }

    h6 {
      margin-bottom: 25px;
      font-size: 14px;
      font-weight: bold;
      color: #202842;
      padding: 0 15px;
      text-align: center;
    }

    .labels {
      display: flex;
      justify-content: space-between;

      input {
        display: none;
      }

      &.label-icons {
        li {
          width: 90px;
          height: 90px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &.active {
            background: #fff;
            box-shadow: 0 5px 15px -5px rgba(#94A5E4, .7);
          }
        }
      }

      &.label-numbers {
        margin: 0 -4px;

        li {
          margin: 0 4px;
          width: 36px;
          height: 36px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #DCDFF1;
          border-radius: 5px;
          font-size: 16px;
          color: #202842;
          cursor: pointer;

          &.active {
            background: #1A2B63;
            border-color: #1A2B63;
            color: #fff;
            box-shadow: 0 5px 10px -5px rgba(#1A2B63, .7);
          }
        }
      }
    }

    .labels-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      font-size: 12px;
      color: #5D698D;
    }

    .message {
      height: 0;
      overflow: hidden;
      transition: 300ms height, 300ms padding-top;

      p {
        font-size: 12px;
        color: #202842;
        font-weight: bold;
        margin-bottom: 5px
      }

      textarea {
        width: 100%;
        border: 1px solid #DCDFF1;
        border-radius: 5px;
        height: 70px;
        padding: 10px;
        font-size: 12px;
        color: #202842;
        resize: none;
        overflow: auto;

        &:focus {
          border-color: #3457DC;
          caret-color: #3457DC;
        }

        &::placeholder {
          color: #5D698D;
        }
      }

      &.active {
        height: 122px;
        padding-top: 25px;
      }
    }

    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 25px;
      font-size: 14px;

      a {
        color: #5D698D;

        &:hover {
          text-decoration: underline;
        }
      }

      button {
        height: 40px;
        background-color: #3457DC;
        border-radius: 5px;
        padding: 0 20px;
        color: #fff;
        cursor: pointer;
        font-weight: bold;

        &:hover {
          background: darken(#3457DC, 5%);
        }
      }
    }
  }
}
let list = document.querySelectorAll('.component--feedback .labels li');

list.forEach(li => li.addEventListener('click', evt => {
    let target = evt.currentTarget,
        input = target.querySelector('input'),
        messageBox = target.parentNode.nextElementSibling;
    if (messageBox.className === 'labels-text') {
        messageBox = messageBox.nextElementSibling;
    }
    if (evt.currentTarget.classList.contains('active')) {
        target.classList.remove('active');
        messageBox.classList.remove('active');
        input.checked = false;
    } else {
        input.checked = true;
        list.forEach(li => li.classList.remove('active'));
        target.classList.add('active');
        messageBox.classList.add('active');
    }
}));

document.querySelectorAll('.close-btn').forEach(btn => btn.addEventListener('click', e => {
    let parent = e.currentTarget.parentNode;
    parent.classList.add('hide');
    // parent.parentNode.removeChild(parent);
    e.preventDefault();
}));