Review the usage of repositioning the parent selector (&)

[JoomFX]

Describe the bug A good example are the Slider styles where we have this selector. When importing the Kendo theme in a class (in order to create a dark theme for example) it is possible that a wrong selector is created.

This import:

.dark-theme {
  @import "~@progress/kendo-theme-default/scss/dist/all.scss";
}

Might generate the following selector (probably depending on the compiler - node-sass vs dart-sass), which is invalid:

.k-slider-horizontal .dark-theme .k-slider-track,
.k-slider-horizontal .dark-theme .k-slider-selection

Expected behavior We need to investigate this further and figure out if reworking the Kendo theme styles is a viable solution or if there is another workaround.

Affected package (please remove the unneeded items)

• theme-default
• theme-bootstrap
• theme-material

Affected suites (please remove the unneeded items)

• Kendo UI for jQuery
• Kendo UI for Angular
• Kendo UI for React
• Kendo UI for Vue
• Telerik UI for Blazor

Affected browsers (please remove the unneeded items)

• All

Build system information (please remove the unneeded items)

• Not Applicable

### Tasks
- [x] #4293 
- [x] #4295 
- [ ] #4298 

[hypetsch]

We are currently also facing this issue. Just if someone also stumbles across it - adding those scss rules fixed it for us:

.k-slider-horizontal .k-slider-track {
   height: $kendo-slider-track-thickness;
   left: 0;
   margin-top: -$kendo-slider-track-thickness / 2;
   top: 50%;
}

.k-slider-vertical .k-slider-track {
   bottom: 0;
   left: 50%;
   margin-left: -$kendo-slider-track-thickness / 2;
   width: $kendo-slider-track-thickness;
}