refactor: deprecated :deep() selector usages [WTEL-5568](https://webi…

…tel.atlassian.net/browse/WTEL-5568)

src/components/wt-checkbox/wt-checkbox.vue

@@ -147,7 +147,7 @@ export default {
 }
 
 .wt-checkbox:hover {
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-active-color);
   }
 }

src/components/wt-icon-btn/wt-icon-btn.vue

@@ -38,7 +38,7 @@ const emit = defineEmits(['click', 'mousedown']);
   width: fit-content;
   line-height: 0;
 
-  &:hover .wt-icon--color-default :deep .wt-icon__icon {
+  &:hover .wt-icon--color-default :deep(.wt-icon__icon) {
     fill: var(--icon-btn-hover-color);
   }
 

src/components/wt-player/wt-player.vue

@@ -200,72 +200,70 @@ export default {
     }
   }
 
-  :deep {
-    .plyr {
+    :deep(.plyr) {
       max-width: 100%; // prevents <video> container overflow
       border-radius: var(--border-radius);
       box-shadow: var(--elevation-10);
-    }
-
-    .plyr__controls > .plyr__control,
-    .plyr__controls > .plyr__controls__item > .plyr__control {
-      padding: var(--plyr-controls-icon-padding);
-    }
-
-    .plyr__controls > .plyr__control > svg,
-    .plyr__controls > .plyr__controls__item > .plyr__control > svg {
-      width: var(--plyr-controls-icon-size);
-      height: var(--plyr-controls-icon-size);
-    }
-
-    .plyr__control--overlaid svg {
-      left: 0; // reset plyr style for video "play" button icon
-    }
-
-    .plyr__progress__buffer {
-      background: var(--wt-player-audio-progress-background);
-    }
-
-    .plyr__progress input,
-    .plyr__volume input {
-      cursor: pointer;
-
-      &::-webkit-slider-thumb {
-        transition: var(--transition);
-        border: var(--wt-slider-border);
-        border-radius: var(--wt-slider-pointer-radius);
-        background: var(--wt-slider-pointer-background-color);
-        -webkit-appearance: none;
-      }
 
-      &::-webkit-slider-runnable-track {
-        -webkit-appearance: none;
+      .plyr__controls > .plyr__control,
+      .plyr__controls > .plyr__controls__item > .plyr__control {
+        padding: var(--plyr-controls-icon-padding);
       }
 
-      &::-moz-range-thumb {
-        width: var(--wt-slider-pointer-size);
-        height: var(--wt-slider-pointer-size);
-        transition: var(--transition);
-        border: var(--wt-slider-border);
-        border-color: var(--wt-slider-pointer-border-color);
-        border-radius: var(--wt-slider-pointer-radius);
-        background: var(--wt-slider-pointer-background-color);
-        -moz-appearance: none;
+      .plyr__controls > .plyr__control > svg,
+      .plyr__controls > .plyr__controls__item > .plyr__control > svg {
+        width: var(--plyr-controls-icon-size);
+        height: var(--plyr-controls-icon-size);
       }
 
-      &::-moz-range-track {
-        -moz-appearance: none;
+      .plyr__control--overlaid svg {
+        left: 0; // reset plyr style for video "play" button icon
       }
 
-      &::-ms-thumb {
-        appearance: none;
+      .plyr__progress__buffer {
+        background: var(--wt-player-audio-progress-background);
       }
 
-      &::-ms-track {
-        appearance: none;
+      .plyr__progress input,
+      .plyr__volume input {
+        cursor: pointer;
+
+        &::-webkit-slider-thumb {
+          transition: var(--transition);
+          border: var(--wt-slider-border);
+          border-radius: var(--wt-slider-pointer-radius);
+          background: var(--wt-slider-pointer-background-color);
+          -webkit-appearance: none;
+        }
+
+        &::-webkit-slider-runnable-track {
+          -webkit-appearance: none;
+        }
+
+        &::-moz-range-thumb {
+          width: var(--wt-slider-pointer-size);
+          height: var(--wt-slider-pointer-size);
+          transition: var(--transition);
+          border: var(--wt-slider-border);
+          border-color: var(--wt-slider-pointer-border-color);
+          border-radius: var(--wt-slider-pointer-radius);
+          background: var(--wt-slider-pointer-background-color);
+          -moz-appearance: none;
+        }
+
+        &::-moz-range-track {
+          -moz-appearance: none;
+        }
+
+        &::-ms-thumb {
+          appearance: none;
+        }
+
+        &::-ms-track {
+          appearance: none;
+        }
       }
     }
   }
-}
 
 </style>

src/components/wt-radio/wt-radio.vue

@@ -131,21 +131,21 @@ export default {
 }
 
 .wt-radio:hover {
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-btn-hover-color);
   }
 }
 
 .wt-radio--active {
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-active-color);
   }
 }
 
 .wt-radio--disabled {
   pointer-events: none;
 
-  :deep .wt-icon__icon {
+  :deep(.wt-icon__icon) {
     fill: var(--icon-disabled-color);
   }
 }

src/components/wt-select/_multiselect.scss

@@ -1,6 +1,6 @@
 @import '../../../src/css/main.scss';
 
-.multiselect :deep {
+:deep(.multiselect) {
   position: relative;
   cursor: pointer;
 
@@ -106,7 +106,7 @@
   }
 }
 
-.multiselect--active :deep {
+:deep(.multiselect--active) {
   .multiselect__select.multiselect__arrow .wt-icon__icon {
     fill: var(--icon-active-color);
   }
@@ -118,7 +118,7 @@
 
 .wt-select--loading,
 .wt-tags-input--loading {
-  :deep {
+  :deep(.multiselect) {
     .multiselect__content-wrapper {
       overflow-y: hidden;
     }
@@ -141,7 +141,7 @@
 
 .wt-select.wt-select--invalid,
 .wt-tags-input.wt-tags-input--invalid {
-  .multiselect :deep {
+  :deep(.multiselect) {
     .multiselect__tags {
       border-color: var(--wt-text-field-input-border-error-color);
       outline: none; // prevent outline overlapping false color
@@ -172,8 +172,7 @@
     background: transparent; // reset default
   }
 
-  .multiselect {
-    :deep {
+  :deep(.multiselect) {
       .multiselect__tags {
         border-color: var(--wt-text-field-input-border-disabled-color);
         background: var(--wt-text-field-input-background-disabled-color);
@@ -184,13 +183,13 @@
         }
       }
     }
-  }
 }
 
+
 // override .wt-select colors on chips
 .wt-tags-input,
 .wt-tags-input--invalid {
-  .multiselect :deep {
+  :deep(.multiselect) {
     .multiselect__tags {
       .multiselect__custom-tag,
       .multiselect__single-label {

src/components/wt-select/wt-select.vue

@@ -285,7 +285,7 @@ export default {
   min-width: 0;
 }
 
-.multiselect :deep {
+:deep(.multiselect) {
   .multiselect__custom-tag,
   .multiselect__single-label {
     // text overflow 3 dots
@@ -297,7 +297,7 @@ export default {
   }
 }
 
-.multiselect--active :deep {
+:deep(.multiselect--active) {
   .multiselect__tags-wrap,
   .multiselect__strong {
     display: none;
@@ -309,7 +309,7 @@ export default {
 // default case
 .wt-select {
   // all is fine
-  .multiselect :deep {
+  :deep(.multiselect) {
     .multiselect__tags {
       padding: var(--input-padding) calc(
         var(--input-padding)
@@ -322,7 +322,7 @@ export default {
 
 // only chip
 .wt-select.wt-select--multiple:not(.wt-select--clearable) {
-  .multiselect :deep {
+  :deep(.multiselect) {
     $multiselect-limit-right-pos: calc(
       var(--select-caret-right-pos)// caret offet from border
       + var(--icon-md-size)// caret size
@@ -345,7 +345,7 @@ export default {
 
 // only clearable
 .wt-select.wt-select--clearable:not(.wt-select--multiple) {
-  .multiselect :deep {
+  :deep(.multiselect) {
     $multiselect-clear-right-pos: calc(
       var(--select-caret-right-pos)// caret offset from border
       + var(--icon-md-size)// caret size
@@ -368,7 +368,7 @@ export default {
 
 // clearable and chip
 .wt-select.wt-select--multiple.wt-select--clearable {
-  .multiselect :deep {
+  :deep(.multiselect) {
     $multiselect-clear-right-pos: calc(
       var(--select-caret-right-pos)// caret offet from border
       + var(--icon-md-size)// caret size

src/components/wt-table/wt-table.vue

@@ -354,7 +354,7 @@ export default {
   &--sortable {
     cursor: pointer;
 
-    &:hover :deep .wt-icon__icon {
+    &:hover :deep(.wt-icon__icon) {
       fill: var(--icon-active-color);
     }
   }

src/components/wt-tags-input/wt-tags-input.vue

@@ -192,7 +192,7 @@ export default {
 }
 
 // paddings recalc
-.wt-tags-input .multiselect :deep {
+.wt-tags-input :deep(.multiselect) {
   .multiselect__tags {
     padding-right: calc(
       var(--input-padding)