@progress/kendo-theme-material 10.1.0-dev.4 → 10.1.0-dev.6

package/dist/meta/sassdoc-raw-data.json

@@ -3608,7 +3608,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-calc-size",
-            "value": "calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} )",
+            "value": "calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) + ( #{$kendo-button-border-width} * 2 ) )",
             "scope": "default",
             "line": {
                 "start": 74,
@@ -3633,7 +3633,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-button-inner-calc-size",
-            "value": "calc( #{$kendo-button-line-height * 1em} + calc( #{$kendo-button-padding-y} * 2 ) )",
+            "value": "calc( ( #{$kendo-button-line-height} * 1em ) + ( #{$kendo-button-padding-y} * 2 ) )",
             "scope": "default",
             "line": {
                 "start": 81,
@@ -11533,7 +11533,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-disabled-checked-text",
-            "value": "if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))",
+            "value": "if($kendo-enable-color-system, k-color( on-primary ), k-contrast-color( $kendo-checkbox-disabled-checked-bg ))",
             "scope": "default",
             "line": {
                 "start": 130,
@@ -11758,7 +11758,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-checked-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='#ffffff' stroke-width='3' d='M4.1,12.7 9,17.6 20.3,6.3'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 165,
@@ -11783,7 +11783,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-checkbox-indeterminate-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-width='3' d='M4 10h12'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#ffffff' stroke-width='3' d='M4 10h12'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 168,
@@ -27344,19 +27344,44 @@
         }
     },
     {
-        "description": "The sizes map for the Input components.\n",
+        "description": "The calculated height of the Input.\n",
         "commentRange": {
             "start": 76,
             "end": 77
         },
+        "context": {
+            "type": "variable",
+            "name": "kendo-input-calc-size",
+            "value": "calc( ( #{$kendo-input-line-height} * 1em ) + ( #{$kendo-input-padding-y} * 2 ) + ( #{$kendo-input-border-width * 2} ) )",
+            "scope": "default",
+            "line": {
+                "start": 78,
+                "end": 78
+            }
+        },
+        "group": [
+            "input"
+        ],
+        "access": "public",
+        "file": {
+            "path": "input/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The sizes map for the Input components.\n",
+        "commentRange": {
+            "start": 83,
+            "end": 84
+        },
         "context": {
             "type": "variable",
             "name": "kendo-input-sizes",
             "value": "(\n    sm: (\n        padding-x: $kendo-input-sm-padding-x,\n        padding-y: $kendo-input-sm-padding-y,\n        font-size: $kendo-input-sm-font-size,\n        line-height: $kendo-input-sm-line-height,\n        button-padding-x: k-spacing(1),\n        button-padding-y: $kendo-input-sm-padding-y\n    ),\n    md: (\n        padding-x: $kendo-input-md-padding-x,\n        padding-y: $kendo-input-md-padding-y,\n        font-size: $kendo-input-md-font-size,\n        line-height: $kendo-input-md-line-height,\n        button-padding-x: k-spacing(1),\n        button-padding-y: $kendo-input-md-padding-y\n    ),\n    lg: (\n        padding-x: $kendo-input-lg-padding-x,\n        padding-y: $kendo-input-lg-padding-y,\n        font-size: $kendo-input-lg-font-size,\n        line-height: $kendo-input-lg-line-height,\n        button-padding-x: k-spacing(1),\n        button-padding-y: $kendo-input-lg-padding-y\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 78,
-                "end": 103
+                "start": 85,
+                "end": 110
             }
         },
         "group": [
@@ -27371,8 +27396,8 @@
     {
         "description": "The background color of the Input components.\n",
         "commentRange": {
-            "start": 105,
-            "end": 106
+            "start": 112,
+            "end": 113
         },
         "context": {
             "type": "variable",
@@ -27380,8 +27405,8 @@
             "value": "if($kendo-enable-color-system, k-color( surface ), k-try-shade( $kendo-component-bg, .5 ))",
             "scope": "default",
             "line": {
-                "start": 107,
-                "end": 107
+                "start": 114,
+                "end": 114
             }
         },
         "group": [
@@ -27396,8 +27421,8 @@
     {
         "description": "The text color of the Input components.\n",
         "commentRange": {
-            "start": 108,
-            "end": 109
+            "start": 115,
+            "end": 116
         },
         "context": {
             "type": "variable",
@@ -27405,8 +27430,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 110,
-                "end": 110
+                "start": 117,
+                "end": 117
             }
         },
         "group": [
@@ -27421,8 +27446,8 @@
     {
         "description": "The border color of the Input components.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 118,
+            "end": 119
         },
         "context": {
             "type": "variable",
@@ -27430,8 +27455,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 44%, transparent), rgba( $kendo-component-border, .38 ))",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 120,
+                "end": 120
             }
         },
         "group": [
@@ -27446,8 +27471,8 @@
     {
         "description": "The shadow of the Input components.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 121,
+            "end": 122
         },
         "context": {
             "type": "variable",
@@ -27455,8 +27480,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 123,
+                "end": 123
             }
         },
         "group": [
@@ -27471,8 +27496,8 @@
     {
         "description": "The background color of the hovered Input components.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 125,
+            "end": 126
         },
         "context": {
             "type": "variable",
@@ -27480,8 +27505,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 127,
+                "end": 127
             }
         },
         "group": [
@@ -27496,8 +27521,8 @@
     {
         "description": "The text color of the hovered Input components.\n",
         "commentRange": {
-            "start": 121,
-            "end": 122
+            "start": 128,
+            "end": 129
         },
         "context": {
             "type": "variable",
@@ -27505,8 +27530,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 130,
+                "end": 130
             }
         },
         "group": [
@@ -27521,8 +27546,8 @@
     {
         "description": "The border color of the hovered Input components.\n",
         "commentRange": {
-            "start": 124,
-            "end": 125
+            "start": 131,
+            "end": 132
         },
         "context": {
             "type": "variable",
@@ -27530,8 +27555,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 126,
-                "end": 126
+                "start": 133,
+                "end": 133
             }
         },
         "group": [
@@ -27546,8 +27571,8 @@
     {
         "description": "The shadow of the hovered Input components.\n",
         "commentRange": {
-            "start": 127,
-            "end": 128
+            "start": 134,
+            "end": 135
         },
         "context": {
             "type": "variable",
@@ -27555,8 +27580,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 129,
-                "end": 129
+                "start": 136,
+                "end": 136
             }
         },
         "group": [
@@ -27571,8 +27596,8 @@
     {
         "description": "The background color of the focused Input components.\n",
         "commentRange": {
-            "start": 131,
-            "end": 132
+            "start": 138,
+            "end": 139
         },
         "context": {
             "type": "variable",
@@ -27580,8 +27605,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 133,
-                "end": 133
+                "start": 140,
+                "end": 140
             }
         },
         "group": [
@@ -27596,8 +27621,8 @@
     {
         "description": "The text color of the focused Input components.\n",
         "commentRange": {
-            "start": 134,
-            "end": 135
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -27605,8 +27630,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 136,
-                "end": 136
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -27621,8 +27646,8 @@
     {
         "description": "The border color of the focused Input components.\n",
         "commentRange": {
-            "start": 137,
-            "end": 138
+            "start": 144,
+            "end": 145
         },
         "context": {
             "type": "variable",
@@ -27630,8 +27655,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 139,
-                "end": 139
+                "start": 146,
+                "end": 146
             }
         },
         "group": [
@@ -27646,8 +27671,8 @@
     {
         "description": "The shadow of the focused Input components.\n",
         "commentRange": {
-            "start": 140,
-            "end": 141
+            "start": 147,
+            "end": 148
         },
         "context": {
             "type": "variable",
@@ -27655,8 +27680,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 142,
-                "end": 142
+                "start": 149,
+                "end": 149
             }
         },
         "group": [
@@ -27671,8 +27696,8 @@
     {
         "description": "The background color of the selected Input components.\n",
         "commentRange": {
-            "start": 144,
-            "end": 145
+            "start": 151,
+            "end": 152
         },
         "context": {
             "type": "variable",
@@ -27680,8 +27705,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 146,
-                "end": 146
+                "start": 153,
+                "end": 153
             }
         },
         "group": [
@@ -27696,8 +27721,8 @@
     {
         "description": "The text color of the selected Input components.\n",
         "commentRange": {
-            "start": 147,
-            "end": 148
+            "start": 154,
+            "end": 155
         },
         "context": {
             "type": "variable",
@@ -27705,8 +27730,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 149,
-                "end": 149
+                "start": 156,
+                "end": 156
             }
         },
         "group": [
@@ -27721,8 +27746,8 @@
     {
         "description": "The background color of the disabled Input components.\n",
         "commentRange": {
-            "start": 150,
-            "end": 151
+            "start": 157,
+            "end": 158
         },
         "context": {
             "type": "variable",
@@ -27730,8 +27755,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), k-try-shade( $kendo-component-bg, .25 ))",
             "scope": "default",
             "line": {
-                "start": 152,
-                "end": 152
+                "start": 159,
+                "end": 159
             }
         },
         "group": [
@@ -27746,8 +27771,8 @@
     {
         "description": "The text color of the disabled Input components.\n",
         "commentRange": {
-            "start": 153,
-            "end": 154
+            "start": 160,
+            "end": 161
         },
         "context": {
             "type": "variable",
@@ -27755,8 +27780,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 27%, transparent), $kendo-disabled-text)",
             "scope": "default",
             "line": {
-                "start": 155,
-                "end": 155
+                "start": 162,
+                "end": 162
             }
         },
         "group": [
@@ -27771,8 +27796,8 @@
     {
         "description": "The border color of the disabled Input components.\n",
         "commentRange": {
-            "start": 156,
-            "end": 157
+            "start": 163,
+            "end": 164
         },
         "context": {
             "type": "variable",
@@ -27780,8 +27805,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 3%, transparent), rgba( $kendo-component-border, math.div( color.alpha( $kendo-component-border ), 2 ) ))",
             "scope": "default",
             "line": {
-                "start": 158,
-                "end": 158
+                "start": 165,
+                "end": 165
             }
         },
         "group": [
@@ -27796,8 +27821,8 @@
     {
         "description": "The gradient of the disabled Input components.\n",
         "commentRange": {
-            "start": 159,
-            "end": 160
+            "start": 166,
+            "end": 167
         },
         "context": {
             "type": "variable",
@@ -27805,8 +27830,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 161,
-                "end": 161
+                "start": 168,
+                "end": 168
             }
         },
         "group": [
@@ -27821,8 +27846,8 @@
     {
         "description": "The shadow of the disabled Input components.\n",
         "commentRange": {
-            "start": 162,
-            "end": 163
+            "start": 169,
+            "end": 170
         },
         "context": {
             "type": "variable",
@@ -27830,8 +27855,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 164,
-                "end": 164
+                "start": 171,
+                "end": 171
             }
         },
         "group": [
@@ -27846,8 +27871,8 @@
     {
         "description": "The background color of the outline Input components.\n",
         "commentRange": {
-            "start": 166,
-            "end": 167
+            "start": 173,
+            "end": 174
         },
         "context": {
             "type": "variable",
@@ -27855,8 +27880,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 168,
-                "end": 168
+                "start": 175,
+                "end": 175
             }
         },
         "group": [
@@ -27871,8 +27896,8 @@
     {
         "description": "The text color of the outline Input components.\n",
         "commentRange": {
-            "start": 169,
-            "end": 170
+            "start": 176,
+            "end": 177
         },
         "context": {
             "type": "variable",
@@ -27880,8 +27905,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 171,
-                "end": 171
+                "start": 178,
+                "end": 178
             }
         },
         "group": [
@@ -27896,8 +27921,8 @@
     {
         "description": "The border color of the outline Input components.\n",
         "commentRange": {
-            "start": 172,
-            "end": 173
+            "start": 179,
+            "end": 180
         },
         "context": {
             "type": "variable",
@@ -27905,8 +27930,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 174,
-                "end": 174
+                "start": 181,
+                "end": 181
             }
         },
         "group": [
@@ -27921,8 +27946,8 @@
     {
         "description": "The background color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 176,
-            "end": 177
+            "start": 183,
+            "end": 184
         },
         "context": {
             "type": "variable",
@@ -27930,8 +27955,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 178,
-                "end": 178
+                "start": 185,
+                "end": 185
             }
         },
         "group": [
@@ -27946,8 +27971,8 @@
     {
         "description": "The text color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 179,
-            "end": 180
+            "start": 186,
+            "end": 187
         },
         "context": {
             "type": "variable",
@@ -27955,8 +27980,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 181,
-                "end": 181
+                "start": 188,
+                "end": 188
             }
         },
         "group": [
@@ -27971,8 +27996,8 @@
     {
         "description": "The border color of the outline hovered Input components.\n",
         "commentRange": {
-            "start": 182,
-            "end": 183
+            "start": 189,
+            "end": 190
         },
         "context": {
             "type": "variable",
@@ -27980,8 +28005,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 184,
-                "end": 184
+                "start": 191,
+                "end": 191
             }
         },
         "group": [
@@ -27996,8 +28021,8 @@
     {
         "description": "The background color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 186,
-            "end": 187
+            "start": 193,
+            "end": 194
         },
         "context": {
             "type": "variable",
@@ -28005,8 +28030,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 188,
-                "end": 188
+                "start": 195,
+                "end": 195
             }
         },
         "group": [
@@ -28021,8 +28046,8 @@
     {
         "description": "The text color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 189,
-            "end": 190
+            "start": 196,
+            "end": 197
         },
         "context": {
             "type": "variable",
@@ -28030,8 +28055,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 191,
-                "end": 191
+                "start": 198,
+                "end": 198
             }
         },
         "group": [
@@ -28046,8 +28071,8 @@
     {
         "description": "The border color of the outline focused Input components.\n",
         "commentRange": {
-            "start": 192,
-            "end": 193
+            "start": 199,
+            "end": 200
         },
         "context": {
             "type": "variable",
@@ -28055,8 +28080,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 194,
-                "end": 194
+                "start": 201,
+                "end": 201
             }
         },
         "group": [
@@ -28071,8 +28096,8 @@
     {
         "description": "The shadow of the outline focused Input components.\n",
         "commentRange": {
-            "start": 195,
-            "end": 196
+            "start": 202,
+            "end": 203
         },
         "context": {
             "type": "variable",
@@ -28080,8 +28105,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 197,
-                "end": 197
+                "start": 204,
+                "end": 204
             }
         },
         "group": [
@@ -28096,8 +28121,8 @@
     {
         "description": "The background color of the flat Input components.\n",
         "commentRange": {
-            "start": 199,
-            "end": 200
+            "start": 206,
+            "end": 207
         },
         "context": {
             "type": "variable",
@@ -28105,8 +28130,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 201,
-                "end": 201
+                "start": 208,
+                "end": 208
             }
         },
         "group": [
@@ -28121,8 +28146,8 @@
     {
         "description": "The text color of the flat Input components.\n",
         "commentRange": {
-            "start": 202,
-            "end": 203
+            "start": 209,
+            "end": 210
         },
         "context": {
             "type": "variable",
@@ -28130,8 +28155,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 204,
-                "end": 204
+                "start": 211,
+                "end": 211
             }
         },
         "group": [
@@ -28146,8 +28171,8 @@
     {
         "description": "The border color of the flat Input components.\n",
         "commentRange": {
-            "start": 205,
-            "end": 206
+            "start": 212,
+            "end": 213
         },
         "context": {
             "type": "variable",
@@ -28155,8 +28180,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 207,
-                "end": 207
+                "start": 214,
+                "end": 214
             }
         },
         "group": [
@@ -28171,8 +28196,8 @@
     {
         "description": "The background color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 209,
-            "end": 210
+            "start": 216,
+            "end": 217
         },
         "context": {
             "type": "variable",
@@ -28180,8 +28205,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 211,
-                "end": 211
+                "start": 218,
+                "end": 218
             }
         },
         "group": [
@@ -28196,8 +28221,8 @@
     {
         "description": "The text color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 212,
-            "end": 213
+            "start": 219,
+            "end": 220
         },
         "context": {
             "type": "variable",
@@ -28205,8 +28230,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 214,
-                "end": 214
+                "start": 221,
+                "end": 221
             }
         },
         "group": [
@@ -28221,8 +28246,8 @@
     {
         "description": "The border color of the flat hovered Input components.\n",
         "commentRange": {
-            "start": 215,
-            "end": 216
+            "start": 222,
+            "end": 223
         },
         "context": {
             "type": "variable",
@@ -28230,8 +28255,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 217,
-                "end": 217
+                "start": 224,
+                "end": 224
             }
         },
         "group": [
@@ -28246,8 +28271,8 @@
     {
         "description": "The background color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 219,
-            "end": 220
+            "start": 226,
+            "end": 227
         },
         "context": {
             "type": "variable",
@@ -28255,8 +28280,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 221,
-                "end": 221
+                "start": 228,
+                "end": 228
             }
         },
         "group": [
@@ -28271,8 +28296,8 @@
     {
         "description": "The text color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 222,
-            "end": 223
+            "start": 229,
+            "end": 230
         },
         "context": {
             "type": "variable",
@@ -28280,8 +28305,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 224,
-                "end": 224
+                "start": 231,
+                "end": 231
             }
         },
         "group": [
@@ -28296,8 +28321,8 @@
     {
         "description": "The border color of the flat focused Input components.\n",
         "commentRange": {
-            "start": 225,
-            "end": 226
+            "start": 232,
+            "end": 233
         },
         "context": {
             "type": "variable",
@@ -28305,8 +28330,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 227,
-                "end": 227
+                "start": 234,
+                "end": 234
             }
         },
         "group": [
@@ -28321,8 +28346,8 @@
     {
         "description": "The shadow of the flat focused Input components.\n",
         "commentRange": {
-            "start": 228,
-            "end": 229
+            "start": 235,
+            "end": 236
         },
         "context": {
             "type": "variable",
@@ -28330,8 +28355,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 230,
-                "end": 230
+                "start": 237,
+                "end": 237
             }
         },
         "group": [
@@ -28346,8 +28371,8 @@
     {
         "description": "The text color of the Input placeholder.\n",
         "commentRange": {
-            "start": 232,
-            "end": 233
+            "start": 239,
+            "end": 240
         },
         "context": {
             "type": "variable",
@@ -28355,8 +28380,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 234,
-                "end": 234
+                "start": 241,
+                "end": 241
             }
         },
         "group": [
@@ -28371,8 +28396,8 @@
     {
         "description": "The opacity of the Input placeholder.\n",
         "commentRange": {
-            "start": 235,
-            "end": 236
+            "start": 242,
+            "end": 243
         },
         "context": {
             "type": "variable",
@@ -28380,8 +28405,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 237,
-                "end": 237
+                "start": 244,
+                "end": 244
             }
         },
         "group": [
@@ -28396,8 +28421,8 @@
     {
         "description": "The color of the Input clear value icon.\n",
         "commentRange": {
-            "start": 240,
-            "end": 241
+            "start": 247,
+            "end": 248
         },
         "context": {
             "type": "variable",
@@ -28405,8 +28430,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 242,
-                "end": 242
+                "start": 249,
+                "end": 249
             }
         },
         "group": [
@@ -28421,8 +28446,8 @@
     {
         "description": "The opacity of the Input clear value icon.\n",
         "commentRange": {
-            "start": 243,
-            "end": 244
+            "start": 250,
+            "end": 251
         },
         "context": {
             "type": "variable",
@@ -28430,8 +28455,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 245,
-                "end": 245
+                "start": 252,
+                "end": 252
             }
         },
         "group": [
@@ -28446,8 +28471,8 @@
     {
         "description": "The color of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 246,
-            "end": 247
+            "start": 253,
+            "end": 254
         },
         "context": {
             "type": "variable",
@@ -28455,8 +28480,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 248,
-                "end": 248
+                "start": 255,
+                "end": 255
             }
         },
         "group": [
@@ -28471,8 +28496,8 @@
     {
         "description": "The opacity of the hovered Input clear value icon.\n",
         "commentRange": {
-            "start": 249,
-            "end": 250
+            "start": 256,
+            "end": 257
         },
         "context": {
             "type": "variable",
@@ -28480,8 +28505,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 251,
-                "end": 251
+                "start": 258,
+                "end": 258
             }
         },
         "group": [
@@ -28496,8 +28521,8 @@
     {
         "description": "The vertical margin of the clear value icon.\n",
         "commentRange": {
-            "start": 253,
-            "end": 254
+            "start": 260,
+            "end": 261
         },
         "context": {
             "type": "variable",
@@ -28505,8 +28530,8 @@
             "value": "k-spacing(0.5)",
             "scope": "default",
             "line": {
-                "start": 255,
-                "end": 255
+                "start": 262,
+                "end": 262
             }
         },
         "group": [
@@ -28521,8 +28546,8 @@
     {
         "description": "The horizontal margin of the clear value icon.\n",
         "commentRange": {
-            "start": 256,
-            "end": 257
+            "start": 263,
+            "end": 264
         },
         "context": {
             "type": "variable",
@@ -28530,8 +28555,8 @@
             "value": "$kendo-input-values-margin-y",
             "scope": "default",
             "line": {
-                "start": 258,
-                "end": 258
+                "start": 265,
+                "end": 265
             }
         },
         "group": [
@@ -28546,8 +28571,8 @@
     {
         "description": "The width of the Input button.\n",
         "commentRange": {
-            "start": 260,
-            "end": 261
+            "start": 267,
+            "end": 268
         },
         "context": {
             "type": "variable",
@@ -28555,8 +28580,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 262,
-                "end": 262
+                "start": 269,
+                "end": 269
             }
         },
         "group": [
@@ -28571,8 +28596,8 @@
     {
         "description": "The border width of the Input button.\n",
         "commentRange": {
-            "start": 263,
-            "end": 264
+            "start": 270,
+            "end": 271
         },
         "context": {
             "type": "variable",
@@ -28580,8 +28605,8 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 265,
-                "end": 265
+                "start": 272,
+                "end": 272
             }
         },
         "group": [
@@ -28596,8 +28621,8 @@
     {
         "description": "The width of the Input spinner button.\n",
         "commentRange": {
-            "start": 266,
-            "end": 267
+            "start": 273,
+            "end": 274
         },
         "context": {
             "type": "variable",
@@ -28605,8 +28630,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 268,
-                "end": 268
+                "start": 275,
+                "end": 275
             }
         },
         "group": [
@@ -28621,8 +28646,8 @@
     {
         "description": "The icon offset of the Input spinner button.\n",
         "commentRange": {
-            "start": 269,
-            "end": 270
+            "start": 276,
+            "end": 277
         },
         "context": {
             "type": "variable",
@@ -28630,8 +28655,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 271,
-                "end": 271
+                "start": 278,
+                "end": 278
             }
         },
         "group": [
@@ -28646,8 +28671,8 @@
     {
         "description": "The color of the Input separator.\n",
         "commentRange": {
-            "start": 273,
-            "end": 274
+            "start": 280,
+            "end": 281
         },
         "context": {
             "type": "variable",
@@ -28655,8 +28680,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 275,
-                "end": 275
+                "start": 282,
+                "end": 282
             }
         },
         "group": [
@@ -28671,8 +28696,8 @@
     {
         "description": "The opacity of the Input separator.\n",
         "commentRange": {
-            "start": 276,
-            "end": 277
+            "start": 283,
+            "end": 284
         },
         "context": {
             "type": "variable",
@@ -28680,8 +28705,8 @@
             "value": ".5",
             "scope": "default",
             "line": {
-                "start": 278,
-                "end": 278
+                "start": 285,
+                "end": 285
             }
         },
         "group": [
@@ -28696,8 +28721,8 @@
     {
         "description": "The text color of the Input prefix.\n",
         "commentRange": {
-            "start": 280,
-            "end": 281
+            "start": 287,
+            "end": 288
         },
         "context": {
             "type": "variable",
@@ -28705,8 +28730,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 282,
-                "end": 282
+                "start": 289,
+                "end": 289
             }
         },
         "group": [
@@ -28721,8 +28746,8 @@
     {
         "description": "The text color of the Input suffix.\n",
         "commentRange": {
-            "start": 283,
-            "end": 284
+            "start": 290,
+            "end": 291
         },
         "context": {
             "type": "variable",
@@ -28730,8 +28755,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 285,
-                "end": 285
+                "start": 292,
+                "end": 292
             }
         },
         "group": [
@@ -28746,8 +28771,8 @@
     {
         "description": "The border color of the invalid Input components.\n",
         "commentRange": {
-            "start": 287,
-            "end": 288
+            "start": 294,
+            "end": 295
         },
         "context": {
             "type": "variable",
@@ -28755,8 +28780,8 @@
             "value": "$kendo-invalid-border",
             "scope": "default",
             "line": {
-                "start": 289,
-                "end": 289
+                "start": 296,
+                "end": 296
             }
         },
         "group": [
@@ -28771,8 +28796,8 @@
     {
         "description": "The shadow of the invalid Input components.\n",
         "commentRange": {
-            "start": 290,
-            "end": 291
+            "start": 297,
+            "end": 298
         },
         "context": {
             "type": "variable",
@@ -28780,8 +28805,8 @@
             "value": "$kendo-invalid-shadow",
             "scope": "default",
             "line": {
-                "start": 292,
-                "end": 292
+                "start": 299,
+                "end": 299
             }
         },
         "group": [
@@ -34568,6 +34593,306 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The gap between the items in the OTP.\n",
+        "commentRange": {
+            "start": 6,
+            "end": 7
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-gap",
+            "value": "k-spacing(1.5)",
+            "scope": "default",
+            "line": {
+                "start": 8,
+                "end": 8
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gap between the items in the small OTP.\n",
+        "commentRange": {
+            "start": 9,
+            "end": 10
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-sm-gap",
+            "value": "k-spacing(1)",
+            "scope": "default",
+            "line": {
+                "start": 11,
+                "end": 11
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gap between the items in the medium OTP.\n",
+        "commentRange": {
+            "start": 12,
+            "end": 13
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-md-gap",
+            "value": "$kendo-otp-gap",
+            "scope": "default",
+            "line": {
+                "start": 14,
+                "end": 14
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The gap between the items in the large OTP.\n",
+        "commentRange": {
+            "start": 15,
+            "end": 16
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-lg-gap",
+            "value": "k-spacing(2)",
+            "scope": "default",
+            "line": {
+                "start": 17,
+                "end": 17
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the OTP separator.\n",
+        "commentRange": {
+            "start": 19,
+            "end": 20
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-separator-padding-x",
+            "value": "$kendo-otp-gap",
+            "scope": "default",
+            "line": {
+                "start": 21,
+                "end": 21
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small OTP separator.\n",
+        "commentRange": {
+            "start": 22,
+            "end": 23
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-sm-separator-padding-x",
+            "value": "$kendo-otp-sm-gap",
+            "scope": "default",
+            "line": {
+                "start": 24,
+                "end": 24
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium OTP separator.\n",
+        "commentRange": {
+            "start": 25,
+            "end": 26
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-md-separator-padding-x",
+            "value": "$kendo-otp-separator-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 27,
+                "end": 27
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large OTP separator.\n",
+        "commentRange": {
+            "start": 28,
+            "end": 29
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-lg-separator-padding-x",
+            "value": "$kendo-otp-lg-gap",
+            "scope": "default",
+            "line": {
+                "start": 30,
+                "end": 30
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the OTP separator.\n",
+        "commentRange": {
+            "start": 32,
+            "end": 33
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-input-width",
+            "value": "$kendo-input-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 34,
+                "end": 34
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small OTP separator.\n",
+        "commentRange": {
+            "start": 35,
+            "end": 36
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-sm-input-width",
+            "value": "$kendo-input-sm-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 37,
+                "end": 37
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium OTP separator.\n",
+        "commentRange": {
+            "start": 38,
+            "end": 39
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-md-input-width",
+            "value": "$kendo-otp-input-width",
+            "scope": "default",
+            "line": {
+                "start": 40,
+                "end": 40
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large OTP separator.\n",
+        "commentRange": {
+            "start": 41,
+            "end": 42
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-otp-lg-input-width",
+            "value": "$kendo-input-lg-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 43,
+                "end": 43
+            }
+        },
+        "group": [
+            "one-time-password"
+        ],
+        "access": "public",
+        "file": {
+            "path": "otp/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The spacing index of the OrgChart.\n",
         "commentRange": {
@@ -40471,8 +40796,8 @@
     {
         "description": "The background color of the Picker components.\n",
         "commentRange": {
-            "start": 294,
-            "end": 295
+            "start": 301,
+            "end": 302
         },
         "context": {
             "type": "variable",
@@ -40480,8 +40805,8 @@
             "value": "$kendo-input-bg",
             "scope": "default",
             "line": {
-                "start": 296,
-                "end": 296
+                "start": 303,
+                "end": 303
             }
         },
         "group": [
@@ -40496,8 +40821,8 @@
     {
         "description": "The text color of the Picker components.\n",
         "commentRange": {
-            "start": 297,
-            "end": 298
+            "start": 304,
+            "end": 305
         },
         "context": {
             "type": "variable",
@@ -40505,8 +40830,8 @@
             "value": "$kendo-input-text",
             "scope": "default",
             "line": {
-                "start": 299,
-                "end": 299
+                "start": 306,
+                "end": 306
             }
         },
         "group": [
@@ -40521,8 +40846,8 @@
     {
         "description": "The border color of the Picker components.\n",
         "commentRange": {
-            "start": 300,
-            "end": 301
+            "start": 307,
+            "end": 308
         },
         "context": {
             "type": "variable",
@@ -40530,8 +40855,8 @@
             "value": "$kendo-input-border",
             "scope": "default",
             "line": {
-                "start": 302,
-                "end": 302
+                "start": 309,
+                "end": 309
             }
         },
         "group": [
@@ -40546,8 +40871,8 @@
     {
         "description": "The gradient of the Picker components.\n",
         "commentRange": {
-            "start": 303,
-            "end": 304
+            "start": 310,
+            "end": 311
         },
         "context": {
             "type": "variable",
@@ -40555,8 +40880,8 @@
             "value": "none",
             "scope": "default",
             "line": {
-                "start": 305,
-                "end": 305
+                "start": 312,
+                "end": 312
             }
         },
         "group": [
@@ -40571,8 +40896,8 @@
     {
         "description": "The shadow of the Picker components.\n",
         "commentRange": {
-            "start": 306,
-            "end": 307
+            "start": 313,
+            "end": 314
         },
         "context": {
             "type": "variable",
@@ -40580,8 +40905,8 @@
             "value": "$kendo-input-shadow",
             "scope": "default",
             "line": {
-                "start": 308,
-                "end": 308
+                "start": 315,
+                "end": 315
             }
         },
         "group": [
@@ -40596,8 +40921,8 @@
     {
         "description": "The background color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 310,
-            "end": 311
+            "start": 317,
+            "end": 318
         },
         "context": {
             "type": "variable",
@@ -40605,8 +40930,8 @@
             "value": "$kendo-input-bg",
             "scope": "default",
             "line": {
-                "start": 312,
-                "end": 312
+                "start": 319,
+                "end": 319
             }
         },
         "group": [
@@ -40621,8 +40946,8 @@
     {
         "description": "The text color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 313,
-            "end": 314
+            "start": 320,
+            "end": 321
         },
         "context": {
             "type": "variable",
@@ -40630,8 +40955,8 @@
             "value": "$kendo-input-hover-text",
             "scope": "default",
             "line": {
-                "start": 315,
-                "end": 315
+                "start": 322,
+                "end": 322
             }
         },
         "group": [
@@ -40646,8 +40971,8 @@
     {
         "description": "The border color of the hovered Picker components.\n",
         "commentRange": {
-            "start": 316,
-            "end": 317
+            "start": 323,
+            "end": 324
         },
         "context": {
             "type": "variable",
@@ -40655,8 +40980,8 @@
             "value": "$kendo-input-hover-border",
             "scope": "default",
             "line": {
-                "start": 318,
-                "end": 318
+                "start": 325,
+                "end": 325
             }
         },
         "group": [
@@ -40671,8 +40996,8 @@
     {
         "description": "The gradient of the hovered Picker components.\n",
         "commentRange": {
-            "start": 319,
-            "end": 320
+            "start": 326,
+            "end": 327
         },
         "context": {
             "type": "variable",
@@ -40680,8 +41005,8 @@
             "value": "none",
             "scope": "default",
             "line": {
-                "start": 321,
-                "end": 321
+                "start": 328,
+                "end": 328
             }
         },
         "group": [
@@ -40696,8 +41021,8 @@
     {
         "description": "The shadow of the hovered Picker components.\n",
         "commentRange": {
-            "start": 322,
-            "end": 323
+            "start": 329,
+            "end": 330
         },
         "context": {
             "type": "variable",
@@ -40705,8 +41030,8 @@
             "value": "$kendo-input-hover-shadow",
             "scope": "default",
             "line": {
-                "start": 324,
-                "end": 324
+                "start": 331,
+                "end": 331
             }
         },
         "group": [
@@ -40721,8 +41046,8 @@
     {
         "description": "The background color of the focused Picker components.\n",
         "commentRange": {
-            "start": 326,
-            "end": 327
+            "start": 333,
+            "end": 334
         },
         "context": {
             "type": "variable",
@@ -40730,8 +41055,8 @@
             "value": "$kendo-input-bg",
             "scope": "default",
             "line": {
-                "start": 328,
-                "end": 328
+                "start": 335,
+                "end": 335
             }
         },
         "group": [
@@ -40746,8 +41071,8 @@
     {
         "description": "The text color of the focused Picker components.\n",
         "commentRange": {
-            "start": 329,
-            "end": 330
+            "start": 336,
+            "end": 337
         },
         "context": {
             "type": "variable",
@@ -40755,8 +41080,8 @@
             "value": "$kendo-input-focus-text",
             "scope": "default",
             "line": {
-                "start": 331,
-                "end": 331
+                "start": 338,
+                "end": 338
             }
         },
         "group": [
@@ -40771,8 +41096,8 @@
     {
         "description": "The border color of the focused Picker components.\n",
         "commentRange": {
-            "start": 332,
-            "end": 333
+            "start": 339,
+            "end": 340
         },
         "context": {
             "type": "variable",
@@ -40780,8 +41105,8 @@
             "value": "$kendo-input-focus-border",
             "scope": "default",
             "line": {
-                "start": 334,
-                "end": 334
+                "start": 341,
+                "end": 341
             }
         },
         "group": [
@@ -40796,8 +41121,8 @@
     {
         "description": "The gradient of the focused Picker components.\n",
         "commentRange": {
-            "start": 335,
-            "end": 336
+            "start": 342,
+            "end": 343
         },
         "context": {
             "type": "variable",
@@ -40805,8 +41130,8 @@
             "value": "none",
             "scope": "default",
             "line": {
-                "start": 337,
-                "end": 337
+                "start": 344,
+                "end": 344
             }
         },
         "group": [
@@ -40821,8 +41146,8 @@
     {
         "description": "The shadow of the focused Picker components.\n",
         "commentRange": {
-            "start": 338,
-            "end": 339
+            "start": 345,
+            "end": 346
         },
         "context": {
             "type": "variable",
@@ -40830,8 +41155,8 @@
             "value": "$kendo-input-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 340,
-                "end": 340
+                "start": 347,
+                "end": 347
             }
         },
         "group": [
@@ -40846,8 +41171,8 @@
     {
         "description": "The background color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 342,
-            "end": 343
+            "start": 349,
+            "end": 350
         },
         "context": {
             "type": "variable",
@@ -40855,8 +41180,8 @@
             "value": "$kendo-input-disabled-bg",
             "scope": "default",
             "line": {
-                "start": 344,
-                "end": 344
+                "start": 351,
+                "end": 351
             }
         },
         "group": [
@@ -40871,8 +41196,8 @@
     {
         "description": "The text color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 345,
-            "end": 346
+            "start": 352,
+            "end": 353
         },
         "context": {
             "type": "variable",
@@ -40880,8 +41205,8 @@
             "value": "$kendo-input-disabled-text",
             "scope": "default",
             "line": {
-                "start": 347,
-                "end": 347
+                "start": 354,
+                "end": 354
             }
         },
         "group": [
@@ -40896,8 +41221,8 @@
     {
         "description": "The border color of the disabled Picker components.\n",
         "commentRange": {
-            "start": 348,
-            "end": 349
+            "start": 355,
+            "end": 356
         },
         "context": {
             "type": "variable",
@@ -40905,8 +41230,8 @@
             "value": "$kendo-input-disabled-border",
             "scope": "default",
             "line": {
-                "start": 350,
-                "end": 350
+                "start": 357,
+                "end": 357
             }
         },
         "group": [
@@ -40921,8 +41246,8 @@
     {
         "description": "The gradient of the disabled Picker components.\n",
         "commentRange": {
-            "start": 351,
-            "end": 352
+            "start": 358,
+            "end": 359
         },
         "context": {
             "type": "variable",
@@ -40930,8 +41255,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 353,
-                "end": 353
+                "start": 360,
+                "end": 360
             }
         },
         "group": [
@@ -40946,8 +41271,8 @@
     {
         "description": "The shadow of the disabled Picker components.\n",
         "commentRange": {
-            "start": 354,
-            "end": 355
+            "start": 361,
+            "end": 362
         },
         "context": {
             "type": "variable",
@@ -40955,8 +41280,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 356,
-                "end": 356
+                "start": 363,
+                "end": 363
             }
         },
         "group": [
@@ -40971,8 +41296,8 @@
     {
         "description": "The background color of the outline Picker components.\n",
         "commentRange": {
-            "start": 358,
-            "end": 359
+            "start": 365,
+            "end": 366
         },
         "context": {
             "type": "variable",
@@ -40980,8 +41305,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 360,
-                "end": 360
+                "start": 367,
+                "end": 367
             }
         },
         "group": [
@@ -40996,8 +41321,8 @@
     {
         "description": "The text color of the outline Picker components.\n",
         "commentRange": {
-            "start": 361,
-            "end": 362
+            "start": 368,
+            "end": 369
         },
         "context": {
             "type": "variable",
@@ -41005,8 +41330,8 @@
             "value": "$kendo-picker-text",
             "scope": "default",
             "line": {
-                "start": 363,
-                "end": 363
+                "start": 370,
+                "end": 370
             }
         },
         "group": [
@@ -41021,8 +41346,8 @@
     {
         "description": "The border color of the outline Picker components.\n",
         "commentRange": {
-            "start": 364,
-            "end": 365
+            "start": 371,
+            "end": 372
         },
         "context": {
             "type": "variable",
@@ -41030,8 +41355,8 @@
             "value": "$kendo-picker-border",
             "scope": "default",
             "line": {
-                "start": 366,
-                "end": 366
+                "start": 373,
+                "end": 373
             }
         },
         "group": [
@@ -41046,8 +41371,8 @@
     {
         "description": "The background color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 368,
-            "end": 369
+            "start": 375,
+            "end": 376
         },
         "context": {
             "type": "variable",
@@ -41055,8 +41380,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 370,
-                "end": 370
+                "start": 377,
+                "end": 377
             }
         },
         "group": [
@@ -41071,8 +41396,8 @@
     {
         "description": "The text color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 371,
-            "end": 372
+            "start": 378,
+            "end": 379
         },
         "context": {
             "type": "variable",
@@ -41080,8 +41405,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 373,
-                "end": 373
+                "start": 380,
+                "end": 380
             }
         },
         "group": [
@@ -41096,8 +41421,8 @@
     {
         "description": "The border color of the outline hovered Picker components.\n",
         "commentRange": {
-            "start": 374,
-            "end": 375
+            "start": 381,
+            "end": 382
         },
         "context": {
             "type": "variable",
@@ -41105,8 +41430,8 @@
             "value": "$kendo-picker-hover-border",
             "scope": "default",
             "line": {
-                "start": 376,
-                "end": 376
+                "start": 383,
+                "end": 383
             }
         },
         "group": [
@@ -41121,8 +41446,8 @@
     {
         "description": "The background color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 378,
-            "end": 379
+            "start": 385,
+            "end": 386
         },
         "context": {
             "type": "variable",
@@ -41130,8 +41455,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 380,
-                "end": 380
+                "start": 387,
+                "end": 387
             }
         },
         "group": [
@@ -41146,8 +41471,8 @@
     {
         "description": "The text color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 381,
-            "end": 382
+            "start": 388,
+            "end": 389
         },
         "context": {
             "type": "variable",
@@ -41155,8 +41480,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 383,
-                "end": 383
+                "start": 390,
+                "end": 390
             }
         },
         "group": [
@@ -41171,8 +41496,8 @@
     {
         "description": "The border color of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 384,
-            "end": 385
+            "start": 391,
+            "end": 392
         },
         "context": {
             "type": "variable",
@@ -41180,8 +41505,8 @@
             "value": "$kendo-picker-focus-border",
             "scope": "default",
             "line": {
-                "start": 386,
-                "end": 386
+                "start": 393,
+                "end": 393
             }
         },
         "group": [
@@ -41196,8 +41521,8 @@
     {
         "description": "The shadow of the outline focused Picker components.\n",
         "commentRange": {
-            "start": 387,
-            "end": 388
+            "start": 394,
+            "end": 395
         },
         "context": {
             "type": "variable",
@@ -41205,8 +41530,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 389,
-                "end": 389
+                "start": 396,
+                "end": 396
             }
         },
         "group": [
@@ -41221,8 +41546,8 @@
     {
         "description": "The background color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 391,
-            "end": 392
+            "start": 398,
+            "end": 399
         },
         "context": {
             "type": "variable",
@@ -41230,8 +41555,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 393,
-                "end": 393
+                "start": 400,
+                "end": 400
             }
         },
         "group": [
@@ -41246,8 +41571,8 @@
     {
         "description": "The text color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 394,
-            "end": 395
+            "start": 401,
+            "end": 402
         },
         "context": {
             "type": "variable",
@@ -41255,8 +41580,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 396,
-                "end": 396
+                "start": 403,
+                "end": 403
             }
         },
         "group": [
@@ -41271,8 +41596,8 @@
     {
         "description": "The border color of the outline hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 397,
-            "end": 398
+            "start": 404,
+            "end": 405
         },
         "context": {
             "type": "variable",
@@ -41280,8 +41605,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 399,
-                "end": 399
+                "start": 406,
+                "end": 406
             }
         },
         "group": [
@@ -41296,8 +41621,8 @@
     {
         "description": "The background color of the flat Picker components.\n",
         "commentRange": {
-            "start": 401,
-            "end": 402
+            "start": 408,
+            "end": 409
         },
         "context": {
             "type": "variable",
@@ -41305,8 +41630,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 403,
-                "end": 403
+                "start": 410,
+                "end": 410
             }
         },
         "group": [
@@ -41321,8 +41646,8 @@
     {
         "description": "The text color of the flat Picker components.\n",
         "commentRange": {
-            "start": 404,
-            "end": 405
+            "start": 411,
+            "end": 412
         },
         "context": {
             "type": "variable",
@@ -41330,8 +41655,8 @@
             "value": "$kendo-picker-text",
             "scope": "default",
             "line": {
-                "start": 406,
-                "end": 406
+                "start": 413,
+                "end": 413
             }
         },
         "group": [
@@ -41346,8 +41671,8 @@
     {
         "description": "The border color of the flat Picker components.\n",
         "commentRange": {
-            "start": 407,
-            "end": 408
+            "start": 414,
+            "end": 415
         },
         "context": {
             "type": "variable",
@@ -41355,8 +41680,8 @@
             "value": "$kendo-picker-border",
             "scope": "default",
             "line": {
-                "start": 409,
-                "end": 409
+                "start": 416,
+                "end": 416
             }
         },
         "group": [
@@ -41371,8 +41696,8 @@
     {
         "description": "The background color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 411,
-            "end": 412
+            "start": 418,
+            "end": 419
         },
         "context": {
             "type": "variable",
@@ -41380,8 +41705,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 413,
-                "end": 413
+                "start": 420,
+                "end": 420
             }
         },
         "group": [
@@ -41396,8 +41721,8 @@
     {
         "description": "The text color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 414,
-            "end": 415
+            "start": 421,
+            "end": 422
         },
         "context": {
             "type": "variable",
@@ -41405,8 +41730,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 416,
-                "end": 416
+                "start": 423,
+                "end": 423
             }
         },
         "group": [
@@ -41421,8 +41746,8 @@
     {
         "description": "The background color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 421,
-            "end": 422
+            "start": 428,
+            "end": 429
         },
         "context": {
             "type": "variable",
@@ -41430,8 +41755,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 423,
-                "end": 423
+                "start": 430,
+                "end": 430
             }
         },
         "group": [
@@ -41446,8 +41771,8 @@
     {
         "description": "The text color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 424,
-            "end": 425
+            "start": 431,
+            "end": 432
         },
         "context": {
             "type": "variable",
@@ -41455,8 +41780,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 426,
-                "end": 426
+                "start": 433,
+                "end": 433
             }
         },
         "group": [
@@ -41471,8 +41796,8 @@
     {
         "description": "The border color of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 427,
-            "end": 428
+            "start": 434,
+            "end": 435
         },
         "context": {
             "type": "variable",
@@ -41480,8 +41805,8 @@
             "value": "$kendo-picker-focus-border",
             "scope": "default",
             "line": {
-                "start": 429,
-                "end": 429
+                "start": 436,
+                "end": 436
             }
         },
         "group": [
@@ -41496,8 +41821,8 @@
     {
         "description": "The shadow of the flat focused Picker components.\n",
         "commentRange": {
-            "start": 430,
-            "end": 431
+            "start": 437,
+            "end": 438
         },
         "context": {
             "type": "variable",
@@ -41505,8 +41830,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 432,
-                "end": 432
+                "start": 439,
+                "end": 439
             }
         },
         "group": [
@@ -41521,8 +41846,8 @@
     {
         "description": "The background color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 434,
-            "end": 435
+            "start": 441,
+            "end": 442
         },
         "context": {
             "type": "variable",
@@ -41530,8 +41855,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 436,
-                "end": 436
+                "start": 443,
+                "end": 443
             }
         },
         "group": [
@@ -41546,8 +41871,8 @@
     {
         "description": "The text color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 437,
-            "end": 438
+            "start": 444,
+            "end": 445
         },
         "context": {
             "type": "variable",
@@ -41555,8 +41880,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 439,
-                "end": 439
+                "start": 446,
+                "end": 446
             }
         },
         "group": [
@@ -41571,8 +41896,8 @@
     {
         "description": "The border color of the flat hovered and focused Picker components.\n",
         "commentRange": {
-            "start": 440,
-            "end": 441
+            "start": 447,
+            "end": 448
         },
         "context": {
             "type": "variable",
@@ -41580,8 +41905,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 442,
-                "end": 442
+                "start": 449,
+                "end": 449
             }
         },
         "group": [
@@ -41596,8 +41921,8 @@
     {
         "description": "The border color of the flat hovered Picker components.\n",
         "commentRange": {
-            "start": 417,
-            "end": 418
+            "start": 424,
+            "end": 425
         },
         "context": {
             "type": "variable",
@@ -41605,8 +41930,8 @@
             "value": "$kendo-picker-hover-border",
             "scope": "default",
             "line": {
-                "start": 419,
-                "end": 419
+                "start": 426,
+                "end": 426
             }
         },
         "group": [
@@ -46577,7 +46902,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-checked-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-checked-text}'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#ffffff'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 156,
@@ -46602,7 +46927,7 @@
         "context": {
             "type": "variable",
             "name": "kendo-radio-disabled-checked-image",
-            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#{$kendo-radio-disabled-checked-text}'/></svg>\") )",
+            "value": "k-escape-svg( url(\"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='50%' cy='50%' r='4' fill='#adadad'/></svg>\") )",
             "scope": "default",
             "line": {
                 "start": 159,
@@ -57797,15 +58122,15 @@
         }
     },
     {
-        "description": "The background color of the TabStrip wrapper.\n",
+        "description": "The font size of the small TabStrip.\n",
         "commentRange": {
             "start": 32,
             "end": 33
         },
         "context": {
             "type": "variable",
-            "name": "kendo-tabstrip-wrapper-bg",
-            "value": "null",
+            "name": "kendo-tabstrip-sm-font-size",
+            "value": "$kendo-tabstrip-font-size",
             "scope": "default",
             "line": {
                 "start": 34,
@@ -57822,15 +58147,15 @@
         }
     },
     {
-        "description": "The text color of the TabStrip wrapper.\n",
+        "description": "The line height of the small TabStrip.\n",
         "commentRange": {
             "start": 35,
             "end": 36
         },
         "context": {
             "type": "variable",
-            "name": "kendo-tabstrip-wrapper-text",
-            "value": "null",
+            "name": "kendo-tabstrip-sm-line-height",
+            "value": "$kendo-tabstrip-line-height",
             "scope": "default",
             "line": {
                 "start": 37,
@@ -57847,15 +58172,15 @@
         }
     },
     {
-        "description": "The border color of the TabStrip wrapper.\n",
+        "description": "The font size of the medium TabStrip.\n",
         "commentRange": {
             "start": 38,
             "end": 39
         },
         "context": {
             "type": "variable",
-            "name": "kendo-tabstrip-wrapper-border",
-            "value": "null",
+            "name": "kendo-tabstrip-md-font-size",
+            "value": "$kendo-tabstrip-font-size",
             "scope": "default",
             "line": {
                 "start": 40,
@@ -57871,11 +58196,161 @@
             "name": "_variables.scss"
         }
     },
+    {
+        "description": "The line height of the medium TabStrip.\n",
+        "commentRange": {
+            "start": 41,
+            "end": 42
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-md-line-height",
+            "value": "$kendo-tabstrip-line-height",
+            "scope": "default",
+            "line": {
+                "start": 43,
+                "end": 43
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The font size of the large TabStrip.\n",
+        "commentRange": {
+            "start": 44,
+            "end": 45
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-font-size",
+            "value": "$kendo-tabstrip-font-size",
+            "scope": "default",
+            "line": {
+                "start": 46,
+                "end": 46
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The line height of the large TabStrip.\n",
+        "commentRange": {
+            "start": 47,
+            "end": 48
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-line-height",
+            "value": "$kendo-tabstrip-line-height",
+            "scope": "default",
+            "line": {
+                "start": 49,
+                "end": 49
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The background color of the TabStrip wrapper.\n",
+        "commentRange": {
+            "start": 51,
+            "end": 52
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-wrapper-bg",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 53,
+                "end": 53
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The text color of the TabStrip wrapper.\n",
+        "commentRange": {
+            "start": 54,
+            "end": 55
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-wrapper-text",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 56,
+                "end": 56
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The border color of the TabStrip wrapper.\n",
+        "commentRange": {
+            "start": 57,
+            "end": 58
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-wrapper-border",
+            "value": "null",
+            "scope": "default",
+            "line": {
+                "start": 59,
+                "end": 59
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
     {
         "description": "The background color of the TabStrip.\n",
         "commentRange": {
-            "start": 42,
-            "end": 43
+            "start": 61,
+            "end": 62
         },
         "context": {
             "type": "variable",
@@ -57883,8 +58358,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 44,
-                "end": 44
+                "start": 63,
+                "end": 63
             }
         },
         "group": [
@@ -57899,8 +58374,8 @@
     {
         "description": "The text color of the TabStrip.\n",
         "commentRange": {
-            "start": 45,
-            "end": 46
+            "start": 64,
+            "end": 65
         },
         "context": {
             "type": "variable",
@@ -57908,8 +58383,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 47,
-                "end": 47
+                "start": 66,
+                "end": 66
             }
         },
         "group": [
@@ -57924,8 +58399,8 @@
     {
         "description": "The border color of the TabStrip.\n",
         "commentRange": {
-            "start": 48,
-            "end": 49
+            "start": 67,
+            "end": 68
         },
         "context": {
             "type": "variable",
@@ -57933,8 +58408,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 50,
-                "end": 50
+                "start": 69,
+                "end": 69
             }
         },
         "group": [
@@ -57949,8 +58424,8 @@
     {
         "description": "The horizontal padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 52,
-            "end": 53
+            "start": 71,
+            "end": 72
         },
         "context": {
             "type": "variable",
@@ -57958,8 +58433,8 @@
             "value": "k-spacing(6)",
             "scope": "default",
             "line": {
-                "start": 54,
-                "end": 54
+                "start": 73,
+                "end": 73
             }
         },
         "group": [
@@ -57974,8 +58449,8 @@
     {
         "description": "The vertical padding of the TabStrip items.\n",
         "commentRange": {
-            "start": 55,
-            "end": 56
+            "start": 74,
+            "end": 75
         },
         "context": {
             "type": "variable",
@@ -57983,8 +58458,8 @@
             "value": "k-spacing(3.5)",
             "scope": "default",
             "line": {
-                "start": 57,
-                "end": 57
+                "start": 76,
+                "end": 76
             }
         },
         "group": [
@@ -57999,8 +58474,8 @@
     {
         "description": "The border width around the TabStrip items.\n",
         "commentRange": {
-            "start": 58,
-            "end": 59
+            "start": 77,
+            "end": 78
         },
         "context": {
             "type": "variable",
@@ -58008,8 +58483,8 @@
             "value": "0px",
             "scope": "default",
             "line": {
-                "start": 60,
-                "end": 60
+                "start": 79,
+                "end": 79
             }
         },
         "group": [
@@ -58024,8 +58499,8 @@
     {
         "description": "The border radius of the TabStrip items.\n",
         "commentRange": {
-            "start": 61,
-            "end": 62
+            "start": 80,
+            "end": 81
         },
         "context": {
             "type": "variable",
@@ -58033,8 +58508,8 @@
             "value": "0px",
             "scope": "default",
             "line": {
-                "start": 63,
-                "end": 63
+                "start": 82,
+                "end": 82
             }
         },
         "group": [
@@ -58049,8 +58524,8 @@
     {
         "description": "The gap between the TabStrip items.\n",
         "commentRange": {
-            "start": 64,
-            "end": 65
+            "start": 83,
+            "end": 84
         },
         "context": {
             "type": "variable",
@@ -58058,8 +58533,158 @@
             "value": "k-spacing(0)",
             "scope": "default",
             "line": {
-                "start": 66,
-                "end": 66
+                "start": 85,
+                "end": 85
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the small TabStrip items.\n",
+        "commentRange": {
+            "start": 86,
+            "end": 87
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sm-item-padding-x",
+            "value": "k-spacing(6)",
+            "scope": "default",
+            "line": {
+                "start": 88,
+                "end": 88
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the small TabStrip items.\n",
+        "commentRange": {
+            "start": 89,
+            "end": 90
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sm-item-padding-y",
+            "value": "k-spacing(3)",
+            "scope": "default",
+            "line": {
+                "start": 91,
+                "end": 91
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the medium TabStrip items.\n",
+        "commentRange": {
+            "start": 92,
+            "end": 93
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-md-item-padding-x",
+            "value": "$kendo-tabstrip-item-padding-x",
+            "scope": "default",
+            "line": {
+                "start": 94,
+                "end": 94
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the medium TabStrip items.\n",
+        "commentRange": {
+            "start": 95,
+            "end": 96
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-md-item-padding-y",
+            "value": "$kendo-tabstrip-item-padding-y",
+            "scope": "default",
+            "line": {
+                "start": 97,
+                "end": 97
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The horizontal padding of the large TabStrip items.\n",
+        "commentRange": {
+            "start": 98,
+            "end": 99
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-item-padding-x",
+            "value": "k-spacing(6)",
+            "scope": "default",
+            "line": {
+                "start": 100,
+                "end": 100
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The vertical padding of the large TabStrip items.\n",
+        "commentRange": {
+            "start": 101,
+            "end": 102
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-lg-item-padding-y",
+            "value": "k-spacing(4)",
+            "scope": "default",
+            "line": {
+                "start": 103,
+                "end": 103
             }
         },
         "group": [
@@ -58074,8 +58699,8 @@
     {
         "description": " The background color of the TabStrip items.\n",
         "commentRange": {
-            "start": 68,
-            "end": 69
+            "start": 105,
+            "end": 106
         },
         "context": {
             "type": "variable",
@@ -58083,8 +58708,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 70,
-                "end": 70
+                "start": 107,
+                "end": 107
             }
         },
         "group": [
@@ -58099,8 +58724,8 @@
     {
         "description": "The text color of the TabStrip items.\n",
         "commentRange": {
-            "start": 71,
-            "end": 72
+            "start": 108,
+            "end": 109
         },
         "context": {
             "type": "variable",
@@ -58108,8 +58733,8 @@
             "value": "$kendo-subtle-text",
             "scope": "default",
             "line": {
-                "start": 73,
-                "end": 73
+                "start": 110,
+                "end": 110
             }
         },
         "group": [
@@ -58124,8 +58749,8 @@
     {
         "description": "The border color of the TabStrip items.\n",
         "commentRange": {
-            "start": 74,
-            "end": 75
+            "start": 111,
+            "end": 112
         },
         "context": {
             "type": "variable",
@@ -58133,8 +58758,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 76,
-                "end": 76
+                "start": 113,
+                "end": 113
             }
         },
         "group": [
@@ -58149,8 +58774,8 @@
     {
         "description": "The gradient of the TabStrip items.\n",
         "commentRange": {
-            "start": 77,
-            "end": 78
+            "start": 114,
+            "end": 115
         },
         "context": {
             "type": "variable",
@@ -58158,8 +58783,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 79,
-                "end": 79
+                "start": 116,
+                "end": 116
             }
         },
         "group": [
@@ -58174,8 +58799,8 @@
     {
         "description": "The background color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 81,
-            "end": 82
+            "start": 118,
+            "end": 119
         },
         "context": {
             "type": "variable",
@@ -58183,8 +58808,8 @@
             "value": "$kendo-hover-bg",
             "scope": "default",
             "line": {
-                "start": 83,
-                "end": 83
+                "start": 120,
+                "end": 120
             }
         },
         "group": [
@@ -58199,8 +58824,8 @@
     {
         "description": "The text color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 84,
-            "end": 85
+            "start": 121,
+            "end": 122
         },
         "context": {
             "type": "variable",
@@ -58208,8 +58833,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 86,
-                "end": 86
+                "start": 123,
+                "end": 123
             }
         },
         "group": [
@@ -58224,8 +58849,8 @@
     {
         "description": "The border color of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 87,
-            "end": 88
+            "start": 124,
+            "end": 125
         },
         "context": {
             "type": "variable",
@@ -58233,8 +58858,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 89,
-                "end": 89
+                "start": 126,
+                "end": 126
             }
         },
         "group": [
@@ -58249,8 +58874,8 @@
     {
         "description": "The gradient of the hovered TabStrip items.\n",
         "commentRange": {
-            "start": 90,
-            "end": 91
+            "start": 127,
+            "end": 128
         },
         "context": {
             "type": "variable",
@@ -58258,8 +58883,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 92,
-                "end": 92
+                "start": 129,
+                "end": 129
             }
         },
         "group": [
@@ -58274,8 +58899,8 @@
     {
         "description": "The background color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 94,
-            "end": 95
+            "start": 131,
+            "end": 132
         },
         "context": {
             "type": "variable",
@@ -58283,8 +58908,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 96,
-                "end": 96
+                "start": 133,
+                "end": 133
             }
         },
         "group": [
@@ -58299,8 +58924,8 @@
     {
         "description": "The text color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 97,
-            "end": 98
+            "start": 134,
+            "end": 135
         },
         "context": {
             "type": "variable",
@@ -58308,8 +58933,8 @@
             "value": "$kendo-body-text",
             "scope": "default",
             "line": {
-                "start": 99,
-                "end": 99
+                "start": 136,
+                "end": 136
             }
         },
         "group": [
@@ -58324,8 +58949,8 @@
     {
         "description": "The border color of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 100,
-            "end": 101
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
@@ -58333,8 +58958,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 102,
-                "end": 102
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
@@ -58349,8 +58974,8 @@
     {
         "description": "The gradient of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 103,
-            "end": 104
+            "start": 140,
+            "end": 141
         },
         "context": {
             "type": "variable",
@@ -58358,8 +58983,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 105,
-                "end": 105
+                "start": 142,
+                "end": 142
             }
         },
         "group": [
@@ -58374,8 +58999,8 @@
     {
         "description": "The font weight of the selected TabStrip items.\n",
         "commentRange": {
-            "start": 106,
-            "end": 107
+            "start": 143,
+            "end": 144
         },
         "context": {
             "type": "variable",
@@ -58383,8 +59008,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 108,
-                "end": 108
+                "start": 145,
+                "end": 145
             }
         },
         "group": [
@@ -58399,8 +59024,8 @@
     {
         "description": "The shadow of the focused TabStrip items.\n",
         "commentRange": {
-            "start": 110,
-            "end": 111
+            "start": 147,
+            "end": 148
         },
         "context": {
             "type": "variable",
@@ -58408,8 +59033,8 @@
             "value": "$kendo-list-item-focus-shadow",
             "scope": "default",
             "line": {
-                "start": 112,
-                "end": 112
+                "start": 149,
+                "end": 149
             }
         },
         "group": [
@@ -58424,8 +59049,8 @@
     {
         "description": "The shadow of the dragged TabStrip items.\n",
         "commentRange": {
-            "start": 114,
-            "end": 115
+            "start": 151,
+            "end": 152
         },
         "context": {
             "type": "variable",
@@ -58433,8 +59058,8 @@
             "value": "k-elevation(3)",
             "scope": "default",
             "line": {
-                "start": 116,
-                "end": 116
+                "start": 153,
+                "end": 153
             }
         },
         "group": [
@@ -58449,8 +59074,8 @@
     {
         "description": "The background color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 118,
-            "end": 119
+            "start": 155,
+            "end": 156
         },
         "context": {
             "type": "variable",
@@ -58458,8 +59083,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 120,
-                "end": 120
+                "start": 157,
+                "end": 157
             }
         },
         "group": [
@@ -58474,8 +59099,8 @@
     {
         "description": "The text color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 121,
-            "end": 122
+            "start": 158,
+            "end": 159
         },
         "context": {
             "type": "variable",
@@ -58483,8 +59108,8 @@
             "value": "if($kendo-enable-color-system, color-mix(in srgb, k-color( on-app-surface ) 32%, transparent), map.get( $theme, disabled-text ))",
             "scope": "default",
             "line": {
-                "start": 123,
-                "end": 123
+                "start": 160,
+                "end": 160
             }
         },
         "group": [
@@ -58499,8 +59124,8 @@
     {
         "description": "The border color of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 124,
-            "end": 125
+            "start": 161,
+            "end": 162
         },
         "context": {
             "type": "variable",
@@ -58508,8 +59133,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 126,
-                "end": 126
+                "start": 163,
+                "end": 163
             }
         },
         "group": [
@@ -58524,8 +59149,8 @@
     {
         "description": "The gradient of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 127,
-            "end": 128
+            "start": 164,
+            "end": 165
         },
         "context": {
             "type": "variable",
@@ -58533,8 +59158,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 129,
-                "end": 129
+                "start": 166,
+                "end": 166
             }
         },
         "group": [
@@ -58549,8 +59174,8 @@
     {
         "description": "The opacity of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 130,
-            "end": 131
+            "start": 167,
+            "end": 168
         },
         "context": {
             "type": "variable",
@@ -58558,8 +59183,8 @@
             "value": "1",
             "scope": "default",
             "line": {
-                "start": 132,
-                "end": 132
+                "start": 169,
+                "end": 169
             }
         },
         "group": [
@@ -58574,8 +59199,8 @@
     {
         "description": "The filter of the disabled TabStrip items.\n",
         "commentRange": {
-            "start": 133,
-            "end": 134
+            "start": 170,
+            "end": 171
         },
         "context": {
             "type": "variable",
@@ -58583,8 +59208,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 135,
-                "end": 135
+                "start": 172,
+                "end": 172
             }
         },
         "group": [
@@ -58599,8 +59224,8 @@
     {
         "description": "The border width of the TabStrip indicator.\n",
         "commentRange": {
-            "start": 137,
-            "end": 138
+            "start": 174,
+            "end": 175
         },
         "context": {
             "type": "variable",
@@ -58608,8 +59233,8 @@
             "value": "2px",
             "scope": "default",
             "line": {
-                "start": 139,
-                "end": 139
+                "start": 176,
+                "end": 176
             }
         },
         "group": [
@@ -58624,8 +59249,8 @@
     {
         "description": "The border color of the TabStrip ripple.\n",
         "commentRange": {
-            "start": 140,
-            "end": 141
+            "start": 177,
+            "end": 178
         },
         "context": {
             "type": "variable",
@@ -58633,8 +59258,8 @@
             "value": "$kendo-color-primary",
             "scope": "default",
             "line": {
-                "start": 142,
-                "end": 142
+                "start": 179,
+                "end": 179
             }
         },
         "group": [
@@ -58649,8 +59274,8 @@
     {
         "description": "The horizontal padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 144,
-            "end": 145
+            "start": 181,
+            "end": 182
         },
         "context": {
             "type": "variable",
@@ -58658,8 +59283,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 146,
-                "end": 146
+                "start": 183,
+                "end": 183
             }
         },
         "group": [
@@ -58674,8 +59299,8 @@
     {
         "description": "The vertical padding of the TabStrip content.\n",
         "commentRange": {
-            "start": 147,
-            "end": 148
+            "start": 184,
+            "end": 185
         },
         "context": {
             "type": "variable",
@@ -58683,8 +59308,8 @@
             "value": "k-spacing(4)",
             "scope": "default",
             "line": {
-                "start": 149,
-                "end": 149
+                "start": 186,
+                "end": 186
             }
         },
         "group": [
@@ -58699,8 +59324,8 @@
     {
         "description": "The border width around the TabStrip content.\n",
         "commentRange": {
-            "start": 150,
-            "end": 151
+            "start": 187,
+            "end": 188
         },
         "context": {
             "type": "variable",
@@ -58708,8 +59333,8 @@
             "value": "0px",
             "scope": "default",
             "line": {
-                "start": 152,
-                "end": 152
+                "start": 189,
+                "end": 189
             }
         },
         "group": [
@@ -58724,8 +59349,8 @@
     {
         "description": "The background color of the TabStrip content.\n",
         "commentRange": {
-            "start": 154,
-            "end": 155
+            "start": 191,
+            "end": 192
         },
         "context": {
             "type": "variable",
@@ -58733,8 +59358,8 @@
             "value": "transparent",
             "scope": "default",
             "line": {
-                "start": 156,
-                "end": 156
+                "start": 193,
+                "end": 193
             }
         },
         "group": [
@@ -58749,8 +59374,8 @@
     {
         "description": "The text color of the TabStrip content.\n",
         "commentRange": {
-            "start": 157,
-            "end": 158
+            "start": 194,
+            "end": 195
         },
         "context": {
             "type": "variable",
@@ -58758,8 +59383,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 159,
-                "end": 159
+                "start": 196,
+                "end": 196
             }
         },
         "group": [
@@ -58774,8 +59399,8 @@
     {
         "description": "The border color of the TabStrip content.\n",
         "commentRange": {
-            "start": 160,
-            "end": 161
+            "start": 197,
+            "end": 198
         },
         "context": {
             "type": "variable",
@@ -58783,8 +59408,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 162,
-                "end": 162
+                "start": 199,
+                "end": 199
             }
         },
         "group": [
@@ -58799,8 +59424,8 @@
     {
         "description": "The border color of the focused TabStrip content.\n",
         "commentRange": {
-            "start": 163,
-            "end": 164
+            "start": 200,
+            "end": 201
         },
         "context": {
             "type": "variable",
@@ -58808,8 +59433,58 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 165,
-                "end": 165
+                "start": 202,
+                "end": 202
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the TabStrip.\n",
+        "commentRange": {
+            "start": 204,
+            "end": 205
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-scroll-overlay",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), rgba( $kendo-color-white, 0)), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 206,
+                "end": 206
+            }
+        },
+        "group": [
+            "tabstrip"
+        ],
+        "access": "public",
+        "file": {
+            "path": "tabstrip/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The size map of the TabStrip.\n",
+        "commentRange": {
+            "start": 208,
+            "end": 209
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-tabstrip-sizes",
+            "value": "(\n    sm: (\n        font-size: $kendo-tabstrip-sm-font-size,\n        line-height: $kendo-tabstrip-sm-line-height,\n        item-padding-x: $kendo-tabstrip-sm-item-padding-x,\n        item-padding-y: $kendo-tabstrip-sm-item-padding-y\n    ),\n    md: (\n        font-size: $kendo-tabstrip-md-font-size,\n        line-height: $kendo-tabstrip-md-line-height,\n        item-padding-x: $kendo-tabstrip-md-item-padding-x,\n        item-padding-y: $kendo-tabstrip-md-item-padding-y\n    ),\n    lg: (\n        font-size: $kendo-tabstrip-lg-font-size,\n        line-height: $kendo-tabstrip-lg-line-height,\n        item-padding-x: $kendo-tabstrip-lg-item-padding-x,\n        item-padding-y: $kendo-tabstrip-lg-item-padding-y\n    )\n)",
+            "scope": "default",
+            "line": {
+                "start": 210,
+                "end": 229
             }
         },
         "group": [
@@ -62249,17 +62924,17 @@
     {
         "description": "The horizontal padding of the Toolbar.\n",
         "commentRange": {
-            "start": 7,
-            "end": 8
+            "start": 8,
+            "end": 9
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-x",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 9,
-                "end": 9
+                "start": 10,
+                "end": 10
             }
         },
         "group": [
@@ -62274,8 +62949,8 @@
     {
         "description": "The horizontal padding of the small Toolbar.\n",
         "commentRange": {
-            "start": 10,
-            "end": 11
+            "start": 11,
+            "end": 12
         },
         "context": {
             "type": "variable",
@@ -62283,8 +62958,8 @@
             "value": "k-spacing(1)",
             "scope": "default",
             "line": {
-                "start": 12,
-                "end": 12
+                "start": 13,
+                "end": 13
             }
         },
         "group": [
@@ -62299,17 +62974,17 @@
     {
         "description": "The horizontal padding of the medium Toolbar.\n",
         "commentRange": {
-            "start": 13,
-            "end": 14
+            "start": 14,
+            "end": 15
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-x",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-x",
             "scope": "default",
             "line": {
-                "start": 15,
-                "end": 15
+                "start": 16,
+                "end": 16
             }
         },
         "group": [
@@ -62324,8 +62999,8 @@
     {
         "description": "The horizontal padding of the large Toolbar.\n",
         "commentRange": {
-            "start": 16,
-            "end": 17
+            "start": 17,
+            "end": 18
         },
         "context": {
             "type": "variable",
@@ -62333,8 +63008,8 @@
             "value": "k-spacing(2.5)",
             "scope": "default",
             "line": {
-                "start": 18,
-                "end": 18
+                "start": 19,
+                "end": 19
             }
         },
         "group": [
@@ -62349,17 +63024,17 @@
     {
         "description": "The vertical padding of the Toolbar.\n",
         "commentRange": {
-            "start": 20,
-            "end": 21
+            "start": 21,
+            "end": 22
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-padding-y",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 22,
-                "end": 22
+                "start": 23,
+                "end": 23
             }
         },
         "group": [
@@ -62374,8 +63049,8 @@
     {
         "description": "The vertical padding of the small Toolbar.\n",
         "commentRange": {
-            "start": 23,
-            "end": 24
+            "start": 24,
+            "end": 25
         },
         "context": {
             "type": "variable",
@@ -62383,8 +63058,8 @@
             "value": "k-spacing(1)",
             "scope": "default",
             "line": {
-                "start": 25,
-                "end": 25
+                "start": 26,
+                "end": 26
             }
         },
         "group": [
@@ -62399,17 +63074,17 @@
     {
         "description": "The vertical padding of the medium Toolbar.\n",
         "commentRange": {
-            "start": 26,
-            "end": 27
+            "start": 27,
+            "end": 28
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-padding-y",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-padding-y",
             "scope": "default",
             "line": {
-                "start": 28,
-                "end": 28
+                "start": 29,
+                "end": 29
             }
         },
         "group": [
@@ -62424,8 +63099,8 @@
     {
         "description": "The vertical padding of the large Toolbar.\n",
         "commentRange": {
-            "start": 29,
-            "end": 30
+            "start": 30,
+            "end": 31
         },
         "context": {
             "type": "variable",
@@ -62433,8 +63108,8 @@
             "value": "k-spacing(2.5)",
             "scope": "default",
             "line": {
-                "start": 31,
-                "end": 31
+                "start": 32,
+                "end": 32
             }
         },
         "group": [
@@ -62449,17 +63124,17 @@
     {
         "description": "The spacing between the Toolbar tools.\n",
         "commentRange": {
-            "start": 33,
-            "end": 34
+            "start": 34,
+            "end": 35
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-spacing",
-            "value": "null",
+            "value": "k-spacing(2)",
             "scope": "default",
             "line": {
-                "start": 35,
-                "end": 35
+                "start": 36,
+                "end": 36
             }
         },
         "group": [
@@ -62474,8 +63149,8 @@
     {
         "description": "The spacing between the tools of the small Toolbar.\n",
         "commentRange": {
-            "start": 36,
-            "end": 37
+            "start": 37,
+            "end": 38
         },
         "context": {
             "type": "variable",
@@ -62483,8 +63158,8 @@
             "value": "k-spacing(1.5)",
             "scope": "default",
             "line": {
-                "start": 38,
-                "end": 38
+                "start": 39,
+                "end": 39
             }
         },
         "group": [
@@ -62499,17 +63174,17 @@
     {
         "description": "The spacing between the tools of the medium Toolbar.\n",
         "commentRange": {
-            "start": 39,
-            "end": 40
+            "start": 40,
+            "end": 41
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-md-spacing",
-            "value": "k-spacing(2)",
+            "value": "$kendo-toolbar-spacing",
             "scope": "default",
             "line": {
-                "start": 41,
-                "end": 41
+                "start": 42,
+                "end": 42
             }
         },
         "group": [
@@ -62524,8 +63199,8 @@
     {
         "description": "The spacing between the tools of the large Toolbar.\n",
         "commentRange": {
-            "start": 42,
-            "end": 43
+            "start": 43,
+            "end": 44
         },
         "context": {
             "type": "variable",
@@ -62533,8 +63208,108 @@
             "value": "k-spacing(2.5)",
             "scope": "default",
             "line": {
-                "start": 44,
-                "end": 44
+                "start": 45,
+                "end": 45
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the Toolbar button separator.\n",
+        "commentRange": {
+            "start": 47,
+            "end": 48
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-separator-height",
+            "value": "$kendo-button-md-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 49,
+                "end": 49
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the small Toolbar button separator.\n",
+        "commentRange": {
+            "start": 50,
+            "end": 51
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-sm-separator-height",
+            "value": "$kendo-button-sm-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 52,
+                "end": 52
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the medium Toolbar button separator.\n",
+        "commentRange": {
+            "start": 53,
+            "end": 54
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-md-separator-height",
+            "value": "$kendo-toolbar-separator-height",
+            "scope": "default",
+            "line": {
+                "start": 55,
+                "end": 55
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The height of the large Toolbar button separator.\n",
+        "commentRange": {
+            "start": 56,
+            "end": 57
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-lg-separator-height",
+            "value": "$kendo-button-lg-calc-size",
+            "scope": "default",
+            "line": {
+                "start": 58,
+                "end": 58
             }
         },
         "group": [
@@ -62549,8 +63324,8 @@
     {
         "description": "The width of the border around the Toolbar.\n",
         "commentRange": {
-            "start": 46,
-            "end": 47
+            "start": 60,
+            "end": 61
         },
         "context": {
             "type": "variable",
@@ -62558,8 +63333,8 @@
             "value": "0",
             "scope": "default",
             "line": {
-                "start": 48,
-                "end": 48
+                "start": 62,
+                "end": 62
             }
         },
         "group": [
@@ -62574,8 +63349,8 @@
     {
         "description": "The border radius of the Toolbar.\n",
         "commentRange": {
-            "start": 49,
-            "end": 50
+            "start": 63,
+            "end": 64
         },
         "context": {
             "type": "variable",
@@ -62583,8 +63358,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 51,
-                "end": 51
+                "start": 65,
+                "end": 65
             }
         },
         "group": [
@@ -62599,8 +63374,8 @@
     {
         "description": "The font family of the Toolbar.\n",
         "commentRange": {
-            "start": 53,
-            "end": 54
+            "start": 67,
+            "end": 68
         },
         "context": {
             "type": "variable",
@@ -62608,8 +63383,8 @@
             "value": "var( --kendo-font-family, inherit )",
             "scope": "default",
             "line": {
-                "start": 55,
-                "end": 55
+                "start": 69,
+                "end": 69
             }
         },
         "group": [
@@ -62624,8 +63399,8 @@
     {
         "description": "The font size of the Toolbar.\n",
         "commentRange": {
-            "start": 56,
-            "end": 57
+            "start": 70,
+            "end": 71
         },
         "context": {
             "type": "variable",
@@ -62633,8 +63408,8 @@
             "value": "var( --kendo-font-size, inherit )",
             "scope": "default",
             "line": {
-                "start": 58,
-                "end": 58
+                "start": 72,
+                "end": 72
             }
         },
         "group": [
@@ -62649,8 +63424,8 @@
     {
         "description": "The line height of the Toolbar.\n",
         "commentRange": {
-            "start": 59,
-            "end": 60
+            "start": 73,
+            "end": 74
         },
         "context": {
             "type": "variable",
@@ -62658,8 +63433,8 @@
             "value": "math.div( 20, 14 )",
             "scope": "default",
             "line": {
-                "start": 61,
-                "end": 61
+                "start": 75,
+                "end": 75
             }
         },
         "group": [
@@ -62674,8 +63449,8 @@
     {
         "description": "The background color of the Toolbar.\n",
         "commentRange": {
-            "start": 63,
-            "end": 64
+            "start": 77,
+            "end": 78
         },
         "context": {
             "type": "variable",
@@ -62683,8 +63458,8 @@
             "value": "$kendo-component-bg",
             "scope": "default",
             "line": {
-                "start": 65,
-                "end": 65
+                "start": 79,
+                "end": 79
             }
         },
         "group": [
@@ -62699,8 +63474,8 @@
     {
         "description": "The text color of the Toolbar.\n",
         "commentRange": {
-            "start": 66,
-            "end": 67
+            "start": 80,
+            "end": 81
         },
         "context": {
             "type": "variable",
@@ -62708,8 +63483,8 @@
             "value": "$kendo-component-text",
             "scope": "default",
             "line": {
-                "start": 68,
-                "end": 68
+                "start": 82,
+                "end": 82
             }
         },
         "group": [
@@ -62724,8 +63499,8 @@
     {
         "description": "The color of the border around the Toolbar.\n",
         "commentRange": {
-            "start": 69,
-            "end": 70
+            "start": 83,
+            "end": 84
         },
         "context": {
             "type": "variable",
@@ -62733,8 +63508,8 @@
             "value": "$kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 71,
-                "end": 71
+                "start": 85,
+                "end": 85
             }
         },
         "group": [
@@ -62749,8 +63524,8 @@
     {
         "description": "The gradient of the Toolbar.\n",
         "commentRange": {
-            "start": 72,
-            "end": 73
+            "start": 86,
+            "end": 87
         },
         "context": {
             "type": "variable",
@@ -62758,8 +63533,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 74,
-                "end": 74
+                "start": 88,
+                "end": 88
             }
         },
         "group": [
@@ -62774,8 +63549,8 @@
     {
         "description": "The box shadow of the Toolbar.\n",
         "commentRange": {
-            "start": 75,
-            "end": 76
+            "start": 89,
+            "end": 90
         },
         "context": {
             "type": "variable",
@@ -62783,8 +63558,33 @@
             "value": "k-elevation(4)",
             "scope": "default",
             "line": {
-                "start": 77,
-                "end": 77
+                "start": 91,
+                "end": 91
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the Toolbar.\n",
+        "commentRange": {
+            "start": 92,
+            "end": 93
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-scroll-overlay",
+            "value": "$kendo-toolbar-bg, if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 94,
+                "end": 94
             }
         },
         "group": [
@@ -62799,8 +63599,8 @@
     {
         "description": "The text color of the outline Toolbar.\n",
         "commentRange": {
-            "start": 79,
-            "end": 80
+            "start": 97,
+            "end": 98
         },
         "context": {
             "type": "variable",
@@ -62808,8 +63608,8 @@
             "value": "unset",
             "scope": "default",
             "line": {
-                "start": 81,
-                "end": 81
+                "start": 99,
+                "end": 99
             }
         },
         "group": [
@@ -62824,8 +63624,8 @@
     {
         "description": "The color of the border around the outline Toolbar.\n",
         "commentRange": {
-            "start": 82,
-            "end": 83
+            "start": 100,
+            "end": 101
         },
         "context": {
             "type": "variable",
@@ -62833,8 +63633,8 @@
             "value": "currentColor",
             "scope": "default",
             "line": {
-                "start": 84,
-                "end": 84
+                "start": 102,
+                "end": 102
             }
         },
         "group": [
@@ -62849,8 +63649,8 @@
     {
         "description": "The gradient of the outline Toolbar.\n",
         "commentRange": {
-            "start": 85,
-            "end": 86
+            "start": 103,
+            "end": 104
         },
         "context": {
             "type": "variable",
@@ -62858,8 +63658,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 87,
-                "end": 87
+                "start": 105,
+                "end": 105
             }
         },
         "group": [
@@ -62874,8 +63674,8 @@
     {
         "description": "The box shadow of the outline Toolbar.\n",
         "commentRange": {
-            "start": 88,
-            "end": 89
+            "start": 106,
+            "end": 107
         },
         "context": {
             "type": "variable",
@@ -62883,8 +63683,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 90,
-                "end": 90
+                "start": 108,
+                "end": 108
             }
         },
         "group": [
@@ -62899,8 +63699,8 @@
     {
         "description": "The width of the border around the outline Toolbar.\n",
         "commentRange": {
-            "start": 91,
-            "end": 92
+            "start": 109,
+            "end": 110
         },
         "context": {
             "type": "variable",
@@ -62908,8 +63708,33 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 93,
-                "end": 93
+                "start": 111,
+                "end": 111
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the outline Toolbar.\n",
+        "commentRange": {
+            "start": 112,
+            "end": 113
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-outline-scroll-overlay",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 114,
+                "end": 114
             }
         },
         "group": [
@@ -62924,8 +63749,8 @@
     {
         "description": "The text color of the flat Toolbar.\n",
         "commentRange": {
-            "start": 95,
-            "end": 96
+            "start": 117,
+            "end": 118
         },
         "context": {
             "type": "variable",
@@ -62933,8 +63758,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 97,
-                "end": 97
+                "start": 119,
+                "end": 119
             }
         },
         "group": [
@@ -62949,8 +63774,8 @@
     {
         "description": "The color of the border around the flat Toolbar.\n",
         "commentRange": {
-            "start": 98,
-            "end": 99
+            "start": 120,
+            "end": 121
         },
         "context": {
             "type": "variable",
@@ -62958,8 +63783,8 @@
             "value": "$kendo-toolbar-border",
             "scope": "default",
             "line": {
-                "start": 100,
-                "end": 100
+                "start": 122,
+                "end": 122
             }
         },
         "group": [
@@ -62974,8 +63799,8 @@
     {
         "description": "The gradient of the flat Toolbar.\n",
         "commentRange": {
-            "start": 101,
-            "end": 102
+            "start": 123,
+            "end": 124
         },
         "context": {
             "type": "variable",
@@ -62983,8 +63808,8 @@
             "value": "null",
             "scope": "default",
             "line": {
-                "start": 103,
-                "end": 103
+                "start": 125,
+                "end": 125
             }
         },
         "group": [
@@ -62999,8 +63824,8 @@
     {
         "description": "The box shadow of the flat Toolbar.\n",
         "commentRange": {
-            "start": 104,
-            "end": 105
+            "start": 126,
+            "end": 127
         },
         "context": {
             "type": "variable",
@@ -63008,8 +63833,8 @@
             "value": "0 2px 0 -1px $kendo-component-border",
             "scope": "default",
             "line": {
-                "start": 106,
-                "end": 106
+                "start": 128,
+                "end": 128
             }
         },
         "group": [
@@ -63024,8 +63849,8 @@
     {
         "description": "Border width of the flat Toolbar.\n",
         "commentRange": {
-            "start": 107,
-            "end": 108
+            "start": 129,
+            "end": 130
         },
         "context": {
             "type": "variable",
@@ -63033,8 +63858,33 @@
             "value": "1px",
             "scope": "default",
             "line": {
-                "start": 109,
-                "end": 109
+                "start": 131,
+                "end": 131
+            }
+        },
+        "group": [
+            "toolbar"
+        ],
+        "access": "public",
+        "file": {
+            "path": "toolbar/_variables.scss",
+            "name": "_variables.scss"
+        }
+    },
+    {
+        "description": "The left and right scroll overlay of the flat Toolbar.\n",
+        "commentRange": {
+            "start": 132,
+            "end": 133
+        },
+        "context": {
+            "type": "variable",
+            "name": "kendo-toolbar-flat-scroll-overlay",
+            "value": "if($kendo-enable-color-system, k-color( app-surface ), $kendo-color-white), if($kendo-enable-color-system, color-mix(in srgb, k-color( app-surface ) 0%, transparent), rgba( $kendo-color-white, 0))",
+            "scope": "default",
+            "line": {
+                "start": 134,
+                "end": 134
             }
         },
         "group": [
@@ -63049,8 +63899,8 @@
     {
         "description": "The color of the separator border of the Toolbar.\n",
         "commentRange": {
-            "start": 111,
-            "end": 112
+            "start": 137,
+            "end": 138
         },
         "context": {
             "type": "variable",
@@ -63058,8 +63908,8 @@
             "value": "inherit",
             "scope": "default",
             "line": {
-                "start": 113,
-                "end": 113
+                "start": 139,
+                "end": 139
             }
         },
         "group": [
@@ -63074,8 +63924,8 @@
     {
         "description": "The width of the input in the Toolbar.\n",
         "commentRange": {
-            "start": 115,
-            "end": 116
+            "start": 141,
+            "end": 142
         },
         "context": {
             "type": "variable",
@@ -63083,8 +63933,8 @@
             "value": "10em",
             "scope": "default",
             "line": {
-                "start": 117,
-                "end": 117
+                "start": 143,
+                "end": 143
             }
         },
         "group": [
@@ -63099,8 +63949,8 @@
     {
         "description": "The box shadow of the focused Toolbar item.\n",
         "commentRange": {
-            "start": 119,
-            "end": 120
+            "start": 145,
+            "end": 146
         },
         "context": {
             "type": "variable",
@@ -63108,8 +63958,8 @@
             "value": "0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px rgba(0, 0, 0, .14), 0 1px 10px rgba(0, 0, 0, .12)",
             "scope": "default",
             "line": {
-                "start": 121,
-                "end": 121
+                "start": 147,
+                "end": 147
             }
         },
         "group": [
@@ -63124,8 +63974,8 @@
     {
         "description": "The font size of the Toolbar overflow container.\n",
         "commentRange": {
-            "start": 123,
-            "end": 124
+            "start": 149,
+            "end": 150
         },
         "context": {
             "type": "variable",
@@ -63133,8 +63983,8 @@
             "value": "$kendo-menu-popup-md-font-size",
             "scope": "default",
             "line": {
-                "start": 125,
-                "end": 125
+                "start": 151,
+                "end": 151
             }
         },
         "group": [
@@ -63149,8 +63999,8 @@
     {
         "description": "The line-height of the Toolbar overflow container.\n",
         "commentRange": {
-            "start": 126,
-            "end": 127
+            "start": 152,
+            "end": 153
         },
         "context": {
             "type": "variable",
@@ -63158,8 +64008,8 @@
             "value": "$kendo-menu-popup-md-line-height",
             "scope": "default",
             "line": {
-                "start": 128,
-                "end": 128
+                "start": 154,
+                "end": 154
             }
         },
         "group": [
@@ -63174,8 +64024,8 @@
     {
         "description": "The vertical padding of the Toolbar overflow button.\n",
         "commentRange": {
-            "start": 129,
-            "end": 130
+            "start": 155,
+            "end": 156
         },
         "context": {
             "type": "variable",
@@ -63183,8 +64033,8 @@
             "value": "$kendo-menu-popup-md-item-padding-y",
             "scope": "default",
             "line": {
-                "start": 131,
-                "end": 131
+                "start": 157,
+                "end": 157
             }
         },
         "group": [
@@ -63199,8 +64049,8 @@
     {
         "description": "The horizontal padding of the Toolbar overflow button.\n",
         "commentRange": {
-            "start": 132,
-            "end": 133
+            "start": 158,
+            "end": 159
         },
         "context": {
             "type": "variable",
@@ -63208,8 +64058,8 @@
             "value": "$kendo-menu-popup-md-item-padding-x",
             "scope": "default",
             "line": {
-                "start": 134,
-                "end": 134
+                "start": 160,
+                "end": 160
             }
         },
         "group": [
@@ -63224,17 +64074,17 @@
     {
         "description": "The sizes map for the Toolbar.\n",
         "commentRange": {
-            "start": 136,
-            "end": 137
+            "start": 162,
+            "end": 163
         },
         "context": {
             "type": "variable",
             "name": "kendo-toolbar-sizes",
-            "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing\n    )\n)",
+            "value": "(\n    sm: (\n        padding-x: $kendo-toolbar-sm-padding-x,\n        padding-y: $kendo-toolbar-sm-padding-y,\n        spacing: $kendo-toolbar-sm-spacing,\n        separator-height: $kendo-toolbar-sm-separator-height\n    ),\n    md: (\n        padding-x: $kendo-toolbar-md-padding-x,\n        padding-y: $kendo-toolbar-md-padding-y,\n        spacing: $kendo-toolbar-md-spacing,\n        separator-height: $kendo-toolbar-md-separator-height\n    ),\n    lg: (\n        padding-x: $kendo-toolbar-lg-padding-x,\n        padding-y: $kendo-toolbar-lg-padding-y,\n        spacing: $kendo-toolbar-lg-spacing,\n        separator-height: $kendo-toolbar-lg-separator-height\n    )\n)",
             "scope": "default",
             "line": {
-                "start": 138,
-                "end": 154
+                "start": 164,
+                "end": 183
             }
         },
         "group": [