@transfermarkt/global-styles 1.21.0 → 1.23.0

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

@@ -5,10 +5,9 @@
 @use '../../../mixins/icon' as *;
 
 // "!importants" can be removed if the styles are not overridden by other styles (comes often from main.scss)
-
 .tm-btn {
   $font-size-small: rem-calc(12);
-  $font-size-medium: rem-calc(15);
+  $font-size-medium: rem-calc(14);
   $position: 'right';
 
   align-items: center;
@@ -26,6 +25,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;
@@ -54,10 +57,11 @@
   }
 
   &__primary {
-    background-color: tm-color('dark-blue-new');
+    background-color: tm-color('light-blue-new');
 
     &--large {
       height: rem-calc(40);
+      letter-spacing: rem-calc(1);
       text-transform: uppercase;
     }
 
@@ -71,22 +75,18 @@
     &--small {
       font-size: $font-size-small;
       height: rem-calc(30);
+      line-height: normal;
       padding: rem-calc(8) rem-calc(12);
     }
 
     &:hover {
-      background-color: tm-color('light-blue-new');
+      background-color: tm-color('dark-blue-new');
       text-decoration: none;
     }
 
     &--disabled {
-      background-color: tm-color('gainsboro-new');
-      color: tm-color('grey-new');
-
-      &:hover {
-        background-color: tm-color('gainsboro-new');
-        color: tm-color('grey-new');
-      }
+      background-color: tm-color('soft-sky');
+      color: tm-color('white');
     }
 
     &--warning {
@@ -112,7 +112,8 @@
 
   &__secondary {
     background-color: unset;
-    color: tm-color('admiral');
+    border: 1px solid;
+    color: tm-color('light-blue-new');
 
     &--large {
       text-transform: uppercase;
@@ -127,21 +128,22 @@
     }
 
     &:hover {
-      color: tm-color('light-blue-new');
+      border: 1px solid;
+      color: tm-color('dark-blue-new');
       text-decoration: none;
     }
 
     &--disabled {
-      background-color: tm-color('gainsboro-new');
-      color: tm-color('grey-new');
+      border: 1px solid;
+      color: tm-color('soft-sky');
 
       &:hover {
-        background-color: tm-color('gainsboro-new');
-        color: tm-color('grey-new');
+        color: tm-color('soft-sky');
       }
     }
 
     &--warning {
+      border: 1px solid tm-color('warning-new');
       color: tm-color('warning-new');
 
       &:hover {
@@ -150,6 +152,7 @@
     }
 
     &--success {
+      border: 1px solid tm-color('success-dark');
       color: tm-color('success-dark');
 
       &:hover {
@@ -162,10 +165,43 @@
     }
   }
 
+  &__secondary-greys {
+    background-color: unset;
+    border: 1px solid tm-color('silver-mist');
+    color: tm-color('admiral');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: $font-size-medium;
+    }
+
+    &--small {
+      font-size: $font-size-small;
+    }
+
+    &:hover {
+      border: 1px solid tm-color('grey-new');
+      color: tm-color('admiral');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      border: 1px solid tm-color('silver-mist');
+      color: tm-color('silver-mist');
+
+      &:hover {
+        border: 1px solid tm-color('silver-mist');
+        color: tm-color('silver-mist');
+      }
+    }
+  }
+
   &__tertiary {
     background-color: tm-color('white');
-    border: 1px solid #d9dde2;
-    color: tm-color('admiral');
+    color: tm-color('light-blue-new');
 
     &--large {
       text-transform: uppercase;
@@ -180,17 +216,15 @@
     }
 
     &:hover {
-      color: tm-color('light-blue-new');
+      color: tm-color('dark-blue-new');
       text-decoration: none;
     }
 
     &--disabled {
-      background-color: tm-color('gainsboro-new');
-      color: tm-color('grey-new');
+      color: tm-color('soft-sky');
 
       &:hover {
-        background-color: tm-color('gainsboro-new');
-        color: tm-color('grey-new');
+        color: tm-color('soft-sky');
       }
     }
 
@@ -210,6 +244,66 @@
       }
     }
   }
+
+  &__tertiary-blue {
+    background-color: unset;
+    color: tm-color('light-blue-new');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: $font-size-medium;
+    }
+
+    &--small {
+      font-size: $font-size-small;
+    }
+
+    &:hover {
+      color: tm-color('dark-blue-new');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      color: tm-color('soft-sky');
+
+      &:hover {
+        color: tm-color('soft-sky');
+      }
+    }
+  }
+
+  &__tertiary-grey {
+    background-color: unset;
+    color: tm-color('admiral');
+
+    &--large {
+      text-transform: uppercase;
+    }
+
+    &--medium {
+      font-size: $font-size-medium;
+    }
+
+    &--small {
+      font-size: $font-size-small;
+    }
+
+    &:hover {
+      color: tm-color('admiral');
+      text-decoration: none;
+    }
+
+    &--disabled {
+      color: tm-color('silver-mist');
+
+      &:hover {
+        color: tm-color('silver-mist');
+      }
+    }
+  }
 }
 
 .tm-icon-collect {
@@ -221,14 +315,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 {
@@ -248,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;
     }
 
     &:hover {
@@ -269,14 +375,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 {
@@ -295,14 +407,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 {
@@ -317,14 +435,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;
     }
   }
 
@@ -333,14 +457,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 {
@@ -355,14 +485,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;
     }
   }
 
@@ -373,14 +509,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;
     }
   }
 
@@ -389,14 +531,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;
     }
   }
 
@@ -407,14 +555,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;
     }
   }
 
@@ -425,14 +579,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;
     }
   }
 
@@ -441,14 +601,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;
     }
   }
 
@@ -459,14 +625,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 +649,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;
     }
   }
 
@@ -493,14 +671,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;
     }
   }
 
@@ -511,14 +695,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 +719,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;
     }
   }
 
@@ -545,14 +741,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;
     }
   }
 
@@ -563,14 +765,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 +789,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;
     }
   }
 
@@ -597,14 +811,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;
     }
   }
 
@@ -615,14 +835,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 +859,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;
     }
   }
 
@@ -649,14 +881,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;
     }
   }
 
@@ -667,14 +905,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 +929,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;
     }
   }
 
@@ -701,14 +951,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;
     }
   }
 
@@ -719,14 +975,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 +999,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;
     }
   }
 
@@ -753,14 +1021,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;
     }
   }
 
@@ -771,14 +1045,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 +1069,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;
     }
   }
 
@@ -805,14 +1091,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;
     }
   }
 
@@ -823,14 +1115,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 +1139,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;
     }
   }
 
@@ -857,14 +1161,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;
     }
   }
 
@@ -875,14 +1185,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 +1209,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;
     }
   }
 
@@ -909,14 +1231,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;
     }
   }
 
@@ -927,14 +1255,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 +1279,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;
     }
   }
 
@@ -961,14 +1301,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;
     }
   }
 
@@ -979,14 +1325,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 +1349,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;
     }
   }
 
@@ -1013,14 +1371,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;
     }
   }
 
@@ -1031,14 +1395,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 +1419,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;
     }
   }
 
@@ -1065,14 +1441,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;
     }
   }
 
@@ -1083,14 +1465,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 +1489,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;
     }
   }
 
@@ -1117,14 +1511,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;
     }
   }
 
@@ -1135,14 +1535,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 +1559,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;
     }
   }
 
@@ -1169,14 +1581,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;
     }
   }
 
@@ -1187,14 +1605,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 +1629,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;
     }
   }
 
@@ -1221,14 +1651,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;
     }
   }
 
@@ -1239,14 +1675,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 +1699,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;
     }
   }
 
@@ -1273,14 +1721,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;
     }
   }
 
@@ -1291,14 +1745,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 +1769,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;
     }
   }
 
@@ -1325,14 +1791,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;
     }
   }