$field-height: 32px;

.sp-testimonial-tabs-panel {
  .components-range-control__thumb-wrapper {
    background: transparent;

    span {
      background-color: var(--sp-real-primary-color);
    }
  }

  .components-range-control__thumb-wrapper span::after,
  .components-range-control__thumb-wrapper span::before {
    background-color: var(--sp-real-primary-color);
  }

  .sp-real-ranger-length .sp-real-units span,
  .sp-real-ranger-length .sp-real-units button {
    width: 38px;
  }

  .sp-real-range-control {
    .components-range-control {
      .components-input-control {
        .components-input-control__container {
          input {
            text-align: center;
          }
        }
      }
    }

    .components-input-control__container {
      input::-webkit-inner-spin-button {
        margin-right: -12px !important;
        height: $field-height;
      }
    }

    .components-range-control__root,
    .components-input-control__container input {
      height: $field-height !important;
      min-height: $field-height !important;
    }
  }
}

// Range control wrapper
.sp-real-range-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;

  .components-range-control {
    margin-bottom: 0;
    flex: 1;
  }

  &:has(.sp-real-toggle-predefined-btn) .components-range-control {
    flex: 1;
  }
}