.radioGroup,
.checkboxGroup,
.textareaGroup {
  @include flex-direction(column);

  position: relative;

  > div {
    @include flex-align(center, flex-start);

    gap: 0.8rem;
    font-weight: normal;
  }

  label {
    font-weight: 400;
    color: #3c3c40;

    > a {
      color: #165af8;
      text-decoration: underline;
      font-weight: 500;
    }
  }
}

.textareaGroup {
  @include flex-align(flex-end, flex-start);

  > span {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 2.2rem;
  }
}

.rangeValues {
  @include flex-align(center, space-between);
   
  .invalid {
    color: var(--color-39, 'red');
  }
}

.rating {
  block-size: var(--starsize, 2.8rem);
  inline-size: var(--w, calc(var(--stars, 5) * var(--starsize, 2.8rem)));
  position: relative;
  touch-action: manipulation;
  appearance: none;
  width: 140px !important;
  background: transparent !important;
  border: 0 !important;
}

.rating::-moz-range-track {
  background: linear-gradient(to right, var(--fill, #F59E0B) 0%, var(--fill, #F59E0B) var(--rating-percent, 60%), var(--fillbg, #CBD5E1) var(--rating-percent, 60%), var(--fillbg, #CBD5E1) 100%);
  block-size: 100%;
  mask: repeat left center/var(--starsize, 2.8rem) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
}

.rating::-webkit-slider-runnable-track {
  block-size: 100%;
  background: linear-gradient(to right, var(--fill, #F59E0B) 0%, var(--fill, #F59E0B) var(--rating-percent, 60%), var(--fillbg, #CBD5E1) var(--rating-percent, 60%), var(--fillbg, #CBD5E1) 100%);
  mask: repeat left center/var(--starsize, 2.8rem) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
}

.rating::-moz-range-thumb {
  height: var(--starsize, 2.8rem);
  opacity: 0;
  width: var(--starsize, 2.8rem);
}

.rating::-webkit-slider-thumb {
  height: var(--starsize, 2.8rem);
  appearance: none;
  background-color: transparent;
  opacity: 0;
  width: var(--starsize, 2.8rem);
}


.switch {
  position: relative;
  height: 2.4rem;
  display: flex;
  align-items: center;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  width: 4.8rem;
  inset: 0;
  background-color: #AFAFB0;
  transition: 0.4s;
  border-radius: 3.4rem;
  height: 2.4rem;
}

.slider::before {
  border-radius: 50%;
  position: absolute;
  content: "";
  height: 2rem;
  width: 2rem;
  left: 0.2rem;
  bottom: 2px;
  background-color: #fff;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: var(--switch-color, #6e33e5);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--switch-color, #6e33e5);
}

input:checked + .slider::before {
  transform: translateX(24px);
}

.switchLabel{
  margin-left: 4.5rem;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--switch-bg, #3C3C40);
}

.errorMsg {
  font-size: 1.2rem;
  color: var(--comment-error-color, #DD4B39);;
  font-weight: 400;
  line-height: 1.8rem;
  grid-column: 1/-1;
  margin-right: auto;
  margin-top: .4rem;
}

.lengthWarning{
  position: absolute;
  bottom: 3.5rem;
  right: 1.5rem;
  font-size: 1.2rem;
  color: var(--comment-length-warning-color, #DD4B39);
  font-weight: 400;
  line-height: 1.8rem;
}