/**
 * Form Slide Verification
 */

.custom-form-state .form-slide-confirm {
  margin: 10px 5px 30px 5px;
  width: 100%;
}

.custom-form-state.text-dark .form-slide-confirm {
  margin: 10px 10px 30px 10px;
}

.custom-form-state .form-slide-text {
  display: block;
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--global-palette9);
  opacity: 0.9;
}

.custom-form-state.text-dark .form-slide-text {
  color: var(--global-palette3);
}

/* Track */
.custom-form-state .form-slide-track {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
}

.custom-form-state.text-dark .form-slide-track {
  background-color: var(--global-palette3);
}

/* Fill */
.custom-form-state .form-slide-fill {
  position: absolute;
  height: 100%;
  width: 0;
  background: #1f2937;
  border-radius: 999px;
  transition: background .3s ease;
}

/* Thumb */
.custom-form-state .form-slide-thumb {
  position: absolute;
  padding: 0;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--global-palette3);
  border: 2px solid #fff;
  cursor: grab;
}

.custom-form-state .form-slide-thumb:active {
  cursor: grabbing;
}

/* Success state */
.custom-form-state .form-slide-confirm.is-complete .form-slide-fill {
  background: var(--global-palette5);
}

.custom-form-state .form-slide-confirm.is-complete .form-slide-thumb {
  background: var(--global-palette5);
}

/* Larger invisible touch area for mobile */
.custom-form-state .form-slide-thumb::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* Button disabled */
.custom-form-state .kb-forms-submit[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

/* Error state */
.custom-form-state .form-slide-confirm.has-error .form-slide-text {
  background: #fff5f5;
  margin-top: 10px;
  padding: 8px;
  border-radius: 2px;
  border: 1px solid #fc8181;
  color: #c53030;
  font-weight: bold;
  width: 100%;
  text-align: left;
}