$icon: "data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%227%22%20fill%3D%22white%22%20stroke%3D%22%23934BE4%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E";

.chattiness-slider {
  appearance: none;
  width: calc(100% - 24px);
  height: 12px;
  background-color: var(--jfv-navy-25);
  border-radius: 8px;
  cursor: pointer;
  margin: 24px auto 0;
  display: block;

  &::-webkit-slider-runnable-track {
    border-radius: 8px;
    height: 12px;
    background: linear-gradient(to right, var(--jfv-blue-400) 0%, var(--jfv-ai-light) var(--value), var(--jfv-navy-25) var(--value), var(--jfv-navy-25) 100%);
  }

  &::-moz-range-track {
    border-radius: 8px;
    height: 12px;
    background: linear-gradient(to right, var(--jfv-blue-400) 0%, var(--jfv-ai-light) var(--value), var(--jfv-navy-25) var(--value), var(--jfv-navy-25) 100%);
  }

  &::-webkit-slider-thumb {
    appearance: none;
    height: 20px;
    width: 20px;
    cursor: ew-resize;
    border-radius: 50%;
    background: url($icon) no-repeat center / contain;
    transform: translateY(-25%);
    filter: drop-shadow(0px 0px 1px rgba(10, 11, 13, 0.04)) drop-shadow(0px 2px 4px rgba(10, 11, 13, 0.32));
  }

  &::-moz-range-thumb {
    appearance: none;
    border: none;
    outline: none;
    height: 20px;
    width: 20px;
    cursor: ew-resize;
    border-radius: 50%;
    background: url($icon) no-repeat center / contain;
    filter: drop-shadow(0px 0px 1px rgba(10, 11, 13, 0.04)) drop-shadow(0px 2px 4px rgba(10, 11, 13, 0.32));
  }

  &--labels {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    & > div {
      font-size: 12px;
      color: var(--jfv-navy-50);
      span {
        font-size: 12px;
        line-height: 16px;
        color: var(--jfv-navy-500);
        display: flex;
        flex-direction: column;
        text-align: center;
        &:nth-child(2) {
          color: var(--jfv-navy-300);
        }
      }
    }
  }
}