@transfermarkt/global-styles 1.22.0 → 1.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.22.0",
+  "version": "1.24.0",
   "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
   "author": "Transfermarkt",
   "license": "MIT",

package/scss/utils/components/buttons/buttons.scss

@@ -8,6 +8,9 @@
 .tm-btn {
   $font-size-small: rem-calc(12);
   $font-size-medium: rem-calc(14);
+  $font-size-large: rem-calc(16);
+  $border-radius: rem-calc(8);
+  $gap: rem-calc(8);
   $position: 'right';
 
   align-items: center;
@@ -25,6 +28,10 @@
   padding: rem-calc(8) rem-calc(20);
   position: relative;
   text-decoration: none;
+  transition:
+    background-color 100ms linear,
+    color 100ms linear,
+    border-color 100ms linear;
 
   &--full-size {
     display: flex;
@@ -56,21 +63,53 @@
     background-color: tm-color('light-blue-new');
 
     &--large {
+      border-radius: $border-radius;
+      font-size: ($font-size-large + rem-calc(2));
+      gap: $gap;
       height: rem-calc(40);
+      letter-spacing: rem-calc(1);
+      line-height: rem-calc(28);
+      padding: rem-calc(8) rem-calc(16);
       text-transform: uppercase;
+
+      @include breakpoint(desktop) {
+        font-size: $font-size-large;
+        line-height: rem-calc(24);
+        min-height: rem-calc(48);
+        min-width: rem-calc(36);
+      }
     }
 
     &--medium {
-      font-size: $font-size-medium;
+      border-radius: $border-radius;
+      font-size: ($font-size-medium + rem-calc(2));
+      gap: $gap;
       height: rem-calc(36);
-      line-height: rem-calc(20);
+      line-height: rem-calc(24);
       padding: rem-calc(8) rem-calc(16);
+
+      @include breakpoint(desktop) {
+        font-size: $font-size-medium;
+        line-height: rem-calc(22);
+        min-height: rem-calc(40);
+        min-width: rem-calc(36);
+      }
     }
 
     &--small {
-      font-size: $font-size-small;
+      border-radius: $border-radius;
+      font-size: ($font-size-small + rem-calc(2));
+      gap: $gap;
       height: rem-calc(30);
+      line-height: rem-calc(18);
       padding: rem-calc(8) rem-calc(12);
+
+      @include breakpoint(desktop) {
+        font-size: $font-size-small;
+        line-height: rem-calc(22);
+        min-height: rem-calc(32);
+        min-width: rem-calc(36);
+      }
     }
 
     &:hover {
@@ -309,14 +348,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -336,14 +381,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &:hover {
@@ -357,14 +408,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -383,14 +440,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -405,14 +468,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -421,14 +490,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
 
     &::before {
@@ -443,14 +518,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -461,14 +542,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -477,14 +564,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -495,14 +588,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -513,14 +612,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -529,14 +634,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -547,14 +658,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -565,14 +682,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -581,14 +704,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -599,14 +728,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -617,14 +752,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -633,14 +774,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -651,14 +798,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -669,14 +822,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -685,14 +844,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -703,14 +868,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -721,14 +892,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -737,14 +914,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -755,14 +938,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -773,14 +962,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -789,14 +984,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -807,14 +1008,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -825,14 +1032,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -841,14 +1054,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -859,14 +1078,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -877,14 +1102,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -893,14 +1124,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -911,14 +1148,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -929,14 +1172,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -945,14 +1194,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -963,14 +1218,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -981,14 +1242,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -997,14 +1264,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1015,14 +1288,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1033,14 +1312,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1049,14 +1334,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1067,14 +1358,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1085,14 +1382,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1101,14 +1404,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1119,14 +1428,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1137,14 +1452,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1153,14 +1474,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1171,14 +1498,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1189,14 +1522,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1205,14 +1544,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1223,14 +1568,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1241,14 +1592,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1257,14 +1614,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1275,14 +1638,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1293,14 +1662,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1309,14 +1684,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1327,14 +1708,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1345,14 +1732,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1361,14 +1754,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1379,14 +1778,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1397,14 +1802,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }
 
@@ -1413,14 +1824,20 @@
 
     &--large {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.8;
     }
 
     &--medium {
       @include tm-icon-size(16px);
+
+      stroke-width: 1.5;
     }
 
     &--small {
       @include tm-icon-size(14px);
+
+      stroke-width: 1.2;
     }
   }