.btn-message {
  position: absolute;
  border-radius: 100%;
  font-size: 0.7em;
  width: 2em;
  height: 2em;
  color: var(--color-text);
  transition: all 0.1s ease-in-out;
  bottom: 0;
  transform: translate(50%, 50%);
  /* border: 1px solid var(--color-border); */
}
.btn-message.clicked {
  width: 2.2em;
  height: 2.2em;
}

.feedback {
  background-color: #222;
}

.positive {
  right: 2.5em;
  transition: all 0.1s ease-in-out;
}
.positive.clicked {
  color: var(--color-positive-feedback);
}

.negative {
  right: 5.5em;
  transition: all 0.1s ease-in-out;
}
.negative.clicked {
  color: var(--color-negative-feedback);
}

.btn-message-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.1s ease-in-out;
}
.btn-message.clicked > .btn-message-icon {
  font-size: 1.15em;
  transform: translate(-50%, -50%);
}
.btn-message-icon.fa-thumbs-up {
  top: 47%;
}
.btn-message-icon.fa-thumbs-down {
  top: 53%;
}

.playback {
  background-color: var(--color-librairie-martin);
  /* background: linear-gradient(
    135deg,
    var(--color-librairie-martin),
    var(--color-librairie-martin-dark)
  ); */
  right: 8.5em;
}
.playback.disabled {
  display: none;
}

.btn-message-icon.fa-play {
  left: 55%;
  top: 52%;
}
.btn-message-icon.fa-pause {
  top: 52%;
}

.loading-half-circle {
  width: 1em;
  height: 1em;
  position: absolute;
  top: .5em;
  left: .5em;
  border-radius: 100%;
  border: 3px solid transparent;
  border-top: 3px solid white;
  border-right: 3px solid white;
  animation: spin 1s linear infinite;
}