@expressms/smartapp-ui 1.1.4 → 1.1.6

package/build/main/assets/icons/check-mark.svg

@@ -1,3 +1,3 @@
-<svg width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M9.42871 18C14.3993 18 18.4287 13.9706 18.4287 9C18.4287 4.02944 14.3993 0 9.42871 0C4.45815 0 0.428711 4.02944 0.428711 9C0.428711 13.9706 4.45815 18 9.42871 18ZM8.86036 12.3453L14.1358 7.07023C14.5264 6.67921 14.5264 6.04566 14.1356 5.65486C13.7449 5.26428 13.1112 5.26399 12.7203 5.65486L8.15288 10.2223L6.137 8.20643C5.7463 7.81571 5.11265 7.81571 4.72178 8.20658C4.33098 8.59738 4.33098 9.23115 4.72178 9.62187L7.44499 12.3453C7.83601 12.736 8.46971 12.736 8.86036 12.3453Z" fill="currentColor"/>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5227 15.5227 20 10 20C4.47727 20 0 15.5227 0 10C0 4.47727 4.47727 0 10 0C15.5227 0 20 4.47727 20 10ZM15.1909 7.91364C15.5445 7.55727 15.5427 6.98182 15.1864 6.62818C14.83 6.27364 14.2545 6.27545 13.9009 6.63182L8.22091 12.3464L6.09909 10.2118C5.74545 9.85545 5.17 9.85364 4.81364 10.2073C4.45727 10.5618 4.45545 11.1373 4.81 11.4927L7.57636 14.2773C7.74727 14.4491 7.97909 14.5455 8.22182 14.5455C8.46364 14.5455 8.69545 14.4491 8.86636 14.2773L15.19 7.91364H15.1909Z" fill="currentColor"/>
 </svg>

package/build/main/assets/icons/clear.svg

@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_690_22198)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 8.67417L13.9774 4.6967C14.3435 4.33058 14.9371 4.33058 15.3032 4.6967C15.6693 5.06282 15.6693 5.65641 15.3032 6.02252L11.3257 10L15.3032 13.9775C15.6693 14.3436 15.6693 14.9372 15.3032 15.3033C14.9371 15.6694 14.3435 15.6694 13.9774 15.3033L9.99991 11.3258L6.02244 15.3033C5.65632 15.6694 5.06273 15.6694 4.69661 15.3033C4.33049 14.9372 4.33049 14.3436 4.69661 13.9775L8.67409 10L4.69661 6.02252C4.33049 5.65641 4.33049 5.06282 4.69661 4.6967C5.06273 4.33058 5.65632 4.33058 6.02244 4.6967L9.99991 8.67417Z" fill="#4799E3"/>
+</g>
+<defs>
+<clipPath id="clip0_690_22198">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/build/main/assets/icons/notification-error.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5314 5.99017L19.0614 19.0002L4.00137 19.0002L11.5314 5.99017ZM2.27137 18.0002C1.50137 19.3302 2.46137 21.0002 4.00137 21.0002L19.0614 21.0002C20.6014 21.0002 21.5614 19.3302 20.7914 18.0002L13.2614 4.99017C12.4914 3.66017 10.5714 3.66017 9.80137 4.99017L2.27137 18.0002ZM10.5314 11.0002L10.5314 13.0002C10.5314 13.5502 10.9814 14.0002 11.5314 14.0002C12.0814 14.0002 12.5314 13.5502 12.5314 13.0002L12.5314 11.0002C12.5314 10.4502 12.0814 10.0002 11.5314 10.0002C10.9814 10.0002 10.5314 10.4502 10.5314 11.0002ZM10.5314 16.0002L12.5314 16.0002L12.5314 18.0002L10.5314 18.0002L10.5314 16.0002Z" fill="#C84235"/>
+</svg>

package/build/main/assets/icons/notification-info.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/info">
+<path id="Vector" d="M11.9951 17C12.5451 17 12.9951 16.55 12.9951 16V12C12.9951 11.45 12.5451 11 11.9951 11C11.4451 11 10.9951 11.45 10.9951 12V16C10.9951 16.55 11.4451 17 11.9951 17ZM11.9851 22.0001C6.46512 22.0001 1.99512 17.52 1.99512 12C1.99512 6.48 6.46512 2 11.9851 2C17.515 2 21.9951 6.48 21.9951 12C21.9951 17.52 17.515 22.0001 11.9851 22.0001ZM11.9951 4.00001C7.57512 4.00001 3.99513 7.58 3.99513 12C3.99513 16.42 7.57512 20 11.9951 20C16.4151 20 19.9951 16.42 19.9951 12C19.9951 7.58 16.4151 4.00001 11.9951 4.00001ZM12.9951 7.00001H10.9951V9H12.9951V7.00001Z" fill="#4799E3"/>
+</g>
+</svg>

package/build/main/assets/icons/notification-success.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0055 9.65883C17.365 9.29928 17.365 8.71634 17.0055 8.3568C16.6459 7.99725 16.063 7.99725 15.7034 8.3568L10.3701 13.6902L8.30092 11.621C7.94137 11.2615 7.35843 11.2615 6.99889 11.621C6.63934 11.9805 6.63934 12.5635 6.99889 12.923L9.71906 15.6432C10.0786 16.0027 10.6615 16.0027 11.0211 15.6432L17.0055 9.65883Z" fill="#4799E3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.99512 12C1.99512 17.52 6.46512 22.0001 11.9851 22.0001C17.515 22.0001 21.9951 17.52 21.9951 12C21.9951 6.48 17.515 2 11.9851 2C6.46512 2 1.99512 6.48 1.99512 12ZM3.99513 12C3.99513 7.58 7.57512 4.00001 11.9951 4.00001C16.4151 4.00001 19.9951 7.58 19.9951 12C19.9951 16.42 16.4151 20 11.9951 20C7.57512 20 3.99513 16.42 3.99513 12Z" fill="#4799E3"/>
+</svg>

package/build/main/assets/icons/notification-warning.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="icon/info">
+<path id="Vector" d="M11.9951 17C12.5451 17 12.9951 16.55 12.9951 16V12C12.9951 11.45 12.5451 11 11.9951 11C11.4451 11 10.9951 11.45 10.9951 12V16C10.9951 16.55 11.4451 17 11.9951 17ZM11.9851 22.0001C6.46512 22.0001 1.99512 17.52 1.99512 12C1.99512 6.48 6.46512 2 11.9851 2C17.515 2 21.9951 6.48 21.9951 12C21.9951 17.52 17.515 22.0001 11.9851 22.0001ZM11.9951 4.00001C7.57512 4.00001 3.99513 7.58 3.99513 12C3.99513 16.42 7.57512 20 11.9951 20C16.4151 20 19.9951 16.42 19.9951 12C19.9951 7.58 16.4151 4.00001 11.9951 4.00001ZM12.9951 7.00001H10.9951V9H12.9951V7.00001Z" fill="#FC9E5A"/>
+</g>
+</svg>

package/build/main/constants/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const DEFAULT_BLUE_LIGHT_ICON_COLOR = "#4799E30D";
 export declare const DEFAULT_BLUE_ICON_COLOR = "#4799E3";
+export declare const DEFAULT_BLUE_ICON_HOVER_COLOR = "#3C82C1";
 export declare const DEFAULT_RED_ICON_COLOR = "#EB5545";
 export declare const DEFAULT_GRAY_ICON_COLOR = "#1111114D";
 export declare const DEFAULT_BLACK_ICON_COLOR = "#111111";
@@ -12,6 +13,7 @@ export declare const DEFAULT_BACKGROUND_BUTTON_COLOR = "#FFFFFF";
 export declare const DEFAULT_POPUP_BACKGROUND_COLOR = "rgba(37, 77, 145, 0.2)";
 export declare const INPUT_TYPE_PASSWORD = "password";
 export declare const INPUT_TYPE_TEXT = "text";
+export declare const ENTER_KEY = "Enter";
 export declare enum FONT_SIZE {
     small = "14px",
     default = "16px",
@@ -31,6 +33,6 @@ export declare enum THEME {
     default = "default",
     dark = "dark"
 }
-export declare const BUTTON_PADDING: number;
-export declare const MAX_PADDING_FOR_IMAGE: number;
+export declare const CANCEL_ACTION_TEXT: string;
+export declare const NUMBER_OF_STORIES_FOR_ROUND_INDICATORS: number;
 export declare const DEFAULT_FONT_FAMILY: string;

package/build/main/constants/constants.js

@@ -1,5 +1,6 @@
 export var DEFAULT_BLUE_LIGHT_ICON_COLOR = '#4799E30D';
 export var DEFAULT_BLUE_ICON_COLOR = '#4799E3';
+export var DEFAULT_BLUE_ICON_HOVER_COLOR = '#3C82C1';
 export var DEFAULT_RED_ICON_COLOR = '#EB5545';
 export var DEFAULT_GRAY_ICON_COLOR = '#1111114D';
 export var DEFAULT_BLACK_ICON_COLOR = '#111111';
@@ -12,6 +13,7 @@ export var DEFAULT_BACKGROUND_BUTTON_COLOR = '#FFFFFF';
 export var DEFAULT_POPUP_BACKGROUND_COLOR = 'rgba(37, 77, 145, 0.2)';
 export var INPUT_TYPE_PASSWORD = 'password';
 export var INPUT_TYPE_TEXT = 'text';
+export var ENTER_KEY = 'Enter';
 export var FONT_SIZE;
 (function (FONT_SIZE) {
     FONT_SIZE["small"] = "14px";
@@ -35,6 +37,6 @@ export var THEME;
     THEME["default"] = "default";
     THEME["dark"] = "dark";
 })(THEME || (THEME = {}));
-export var BUTTON_PADDING = 32;
-export var MAX_PADDING_FOR_IMAGE = 200;
+export var CANCEL_ACTION_TEXT = 'Отменить';
+export var NUMBER_OF_STORIES_FOR_ROUND_INDICATORS = 5;
 export var DEFAULT_FONT_FAMILY = 'Open Sans';

package/build/main/helpers/index.d.ts

@@ -3,4 +3,4 @@ export declare const isWebPlatform: (platform: string) => boolean;
 export declare const isIosPlatform: (platform: string) => boolean;
 export declare const isAndroidPlatform: (platform: string) => boolean;
 export declare const isMobilePlatform: (platform: string) => boolean;
-export declare const getClassNames: (className: string, delimiter: string, platform: string) => string;
+export declare const getClassNames: (className: string, delimiter: string, additionalClassName: string) => string;

package/build/main/helpers/index.js

@@ -7,4 +7,4 @@ export var isWebPlatform = function (platform) { return platform === PLATFORM.we
 export var isIosPlatform = function (platform) { return platform === PLATFORM.ios; };
 export var isAndroidPlatform = function (platform) { return platform === PLATFORM.android; };
 export var isMobilePlatform = function (platform) { return isAndroidPlatform(platform) || isIosPlatform(platform); };
-export var getClassNames = function (className, delimiter, platform) { return classNames(className, "".concat(className).concat(delimiter).concat(platform)); };
+export var getClassNames = function (className, delimiter, additionalClassName) { return (classNames(className, "".concat(className).concat(delimiter).concat(additionalClassName))); };

package/build/main/styles/stories.module.scss

@@ -2,6 +2,8 @@
 @import 'react-datepicker/dist/react-datepicker';
 
 $color-black: rgba(17, 17, 17, 1);
+$color-black-10: rgba(0, 0, 0, 0.1);
+$color-black-8: rgba(0, 0, 0, 0.08);
 $color-dark-gray: rgba(17, 17, 17, 0.5);
 $color-darker-gray: rgba(17, 17, 17, 0.3);
 $color-darker-gray-opacity: rgba(0, 0, 0, 0.2);
@@ -9,22 +11,25 @@ $color-darkest-gray-opacity: rgba(204, 204, 204, 1);
 $color-gray: rgba(17, 17, 17, 0.1);
 $color-light-gray: rgba(239, 242, 244, 1);
 $color-lighter-gray: rgba(224, 228, 236, 1);
-$color-lighter-gray-opacity: rgba(224, 228, 236, 0.4);
 $color-lightest-gray: rgba(0, 0, 0, 0.05);
 $color-white: rgba(255, 255, 255, 1);
 $color-dark-red: rgba(222, 97, 97, 1);
 $color-red: rgba(235, 85, 69, 1);
+$color-light-red: rgba(200, 66, 53, 1);
 $color-purple: rgba(130, 98, 223, 1);
+$color-dark-blue: rgba(60, 130, 193, 1);
 $color-blue: rgba(71, 153, 227, 1);
 $color-light-blue: rgba(205, 244, 255, 1);
-$color-lighter-blue: rgba(71, 153, 227, 0.2);
+$color-orange: rgba(252, 158, 90, 1);
+$color-orange-10: rgba(252, 158, 90, 0.1);
+$color-light-orange: rgba(253, 246, 228, 1);
 
-$border-color: rgba(85, 85, 85, 0.2);
+$border-dark-gray-color: rgba(102, 102, 102, 1);
+$border-gray-color: rgba(128, 128, 128, 1);
 
 $popup-background: rgba(37, 77, 145, 0.2);
 
 $box-shadow-light-color: rgba(0, 0, 0, 0.05);
-$box-shadow-color: rgba(0, 0, 0, 0.25);
 $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
 
 .smartapp-action-modal {
@@ -401,40 +406,44 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   .checkmark::before {
     content: '';
     display: inline-block;
-    width: 20px;
-    height: 20px;
+    width: 17px;
+    height: 17px;
     background-color: $color-white;
-    border: 1px solid $color-gray;
+    border: 1.5px solid $border-gray-color;
     border-radius: 50%;
     cursor: pointer;
   }
 
   /* стили при наведении курсора на радио */
   &__custom-check-box:not(:disabled):not(:checked) + .checkmark:hover::before {
-    border-color: $color-gray;
+    border-color: $border-dark-gray-color;
   }
 
   /* стили для активной радиокнопки (при нажатии на неё) */
   &__custom-check-box:not(:disabled):active + .checkmark::before {
-    background-color: $color-gray;
-    border-color: $color-gray;
+    border-color: $border-gray-color;
   }
 
   /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
   &__custom-check-box:focus:not(:checked) + .checkmark::before {
-    border-color: $color-gray;
+    border-color: $border-gray-color;
     background-size: 60% 60%;
   }
 
   /* стили для радиокнопки, находящейся в состоянии checked */
   &__custom-check-box:checked + svg {
-    height: 22px;
-    width: 22px;
+    height: 20px;
+    width: 20px;
     cursor: pointer;
   }
 
+  &__custom-check-box:checked:not(:disabled):hover + svg {
+    color: var(--checkbox-hover-color, $color-dark-blue) !important;
+  }
+
   &__custom-check-box:disabled:not(:checked) + .checkmark::before,
   &__custom-check-box:disabled:checked + svg {
+    opacity: 0.3;
     cursor: default;
   }
 }
@@ -808,21 +817,23 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
     position: relative;
 
     &--field {
-      padding: 12px 16px;
+      padding: 13px 16px;
       border: 1px solid $color-lightest-gray;
       border-radius: 8px;
       font-weight: 400;
-      font-size: 14px;
-      line-height: 19px;
       color: $color-black;
       width: 100%;
       box-sizing: border-box;
 
+      &__with-clear-button {
+        padding-right: 44px;
+      }
+
       &::placeholder {
         font-family: Open Sans, 'sans-serif';
-        font-size: 14px;
+        font-size: inherit;
         font-weight: 400;
-        line-height: 19px;
+        line-height: inherit;
         color: $color-darker-gray;
       }
 
@@ -850,6 +861,15 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
         transform: scale(0.95);
       }
     }
+
+    &--clear-icon {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 16px;
+      margin: auto 0;
+      cursor: pointer;
+    }
   }
 
   &__error {
@@ -1011,67 +1031,78 @@ $box-shadow-dark-color: rgba(0, 0, 0, 0.6);
   }
 }
 
-.smartapp-toggle {
-  position: relative;
-  display: inline-block;
-  width: 34px;
-  height: 14px;
-}
-
 .smartapp-toggle-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
+  width: fit-content;
 }
 
-.smartapp-toggle input {
-  display: none;
+.smartapp-toggle {
+  position: relative;
+  display: inline-block;
+  width: 38px;
+  height: 20px;
+
+  input {
+    display: none;
+  }
 }
 
 .smartapp-slider {
   position: absolute;
-  cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: $color-dark-gray;
-  -webkit-transition: 0.2s;
+  border-radius: 69px;
+  background: $border-gray-color;
   transition: 0.2s;
-}
-
-.smartapp-slider:before {
-  position: absolute;
-  content: '';
-  height: 20px;
-  width: 20px;
-  top: -3px;
-  left: 0;
-  bottom: 3px;
-  background: $color-lighter-gray;
   -webkit-transition: 0.2s;
-  transition: 0.2s;
-  box-shadow: 0 2px 2px $box-shadow-color;
+  cursor: pointer;
+
+  &__disabled {
+    opacity: 0.3;
+    background: $border-gray-color !important;
+    cursor: default;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 2px;
+    top: 0;
+    bottom: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: $color-white;
+    transition: 0.2s;
+    -webkit-transition: 0.2s;
+    margin: auto 0;
+  }
+
+  &:hover {
+    background: $border-dark-gray-color;
+  }
 }
 
 input:checked + .smartapp-slider {
-  background: $color-lighter-blue;
+  background: var(--toggle-color, $color-blue);
 }
 
-input:checked + .smartapp-slider:before {
-  -webkit-transform: translateX(14px);
-  -ms-transform: translateX(14px);
-  transform: translateX(14px);
-  background-color: $color-blue;
-  box-shadow: 0 2px 2px $box-shadow-color;
+input:checked + .smartapp-slider__disabled {
+  background: var(--toggle-color, $color-blue) !important;
 }
 
-.smartapp-slider.round {
-  border-radius: 34px;
+input:checked + .smartapp-slider:hover {
+  background: var(--toggle-hover-color, $color-dark-blue);
 }
 
-.smartapp-slider.round:before {
-  border-radius: 50%;
+input:checked + .smartapp-slider:before {
+  transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  -webkit-transform: translateX(18px);
 }
 
 .smartapp-stories-content {
@@ -1145,14 +1176,17 @@ input:checked + .smartapp-slider:before {
   }
 
   &__story {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
     color: $color-white;
-    padding-top: var(--padding);
 
     &--title {
       font-size: 24px;
       font-weight: 700;
       line-height: 33px;
-      margin-bottom: 24px;
+      margin-bottom: 8px;
       padding: 0 24px;
     }
 
@@ -1177,9 +1211,9 @@ input:checked + .smartapp-slider:before {
     &--button {
       position: absolute;
       bottom: 32px;
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 19px;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 22px;
       text-align: center;
       border-radius: 8px;
       padding: 12px 32px;
@@ -1321,3 +1355,173 @@ input:checked + .smartapp-slider:before {
     transform: rotate(360deg);
   }
 }
+
+.smartapp-modal {
+  width: 100%;
+  padding: 0 20px;
+  cursor: default;
+
+  &__ios,
+  &__android {
+    padding: 0;
+  }
+
+  &__content {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+    background-color: $color-white;
+    border-radius: 4px;
+    padding: 24px;
+
+    &--ios,
+    &--android {
+      border-radius: 12px 12px 0 0;
+      padding: 24px 24px 40px 24px;
+    }
+
+    &--title {
+      font-family: Open Sans, 'sans-serif';
+      font-size: 16px;
+      font-weight: 700;
+      line-height: normal;
+      text-align: center;
+      color: $color-black;
+      margin: 0;
+    }
+
+    &--close-icon {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      cursor: pointer;
+    }
+  }
+}
+
+.modal-content {
+  width: 100%;
+  height: 100%;
+  background: var(--modal-background, $popup-background);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.modal-ios-content,
+.modal-android-content {
+  height: fit-content;
+  border-radius: 12px 12px 0 0;
+  margin: auto 0 0 !important;
+}
+
+.modal-ios-overlay,
+.modal-android-overlay {
+  background: var(--modal-background, $popup-background);
+  cursor: pointer;
+}
+
+.smartapp-notification {
+  display: grid;
+  grid-template-columns: 24px auto;
+  gap: 8px;
+  width: calc(100vw - 50px);
+  font-family: Open Sans, 'sans-serif';
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 19px;
+  color: $color-black;
+  background: $color-white;
+  border-radius: 4px;
+  border: 1px solid $color-black-10;
+  box-shadow: 0 2px 16px 0 $color-black-8;
+  padding: 16px;
+
+  &__content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    &--action {
+      font-weight: 600;
+      color: $color-blue;
+      cursor: pointer;
+    }
+  }
+
+  &__warning {
+    color: $color-orange;
+    background: $color-light-orange;
+    border: 1px solid $color-orange-10;
+    box-shadow: none;
+  }
+
+  &__error {
+    color: $color-light-red;
+  }
+}
+
+.notification-overlay {
+  inset: auto 8px 8px 8px !important;
+}
+
+.notification-ios-overlay,
+.notification-android-overlay {
+  bottom: 40px !important;
+}
+
+.smartapp-radio-button {
+  width: fit-content;
+
+  input[type="radio"] {
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 1.5px solid $border-gray-color;
+    border-radius: 50%;
+    background-color: $color-white;
+    margin: 0;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  input[type="radio"]:not(:disabled):hover {
+    border-color: $border-dark-gray-color;
+    cursor: pointer;
+  }
+
+  input[type="radio"]:disabled {
+    opacity: 0.3;
+  }
+
+  input[type="radio"]:checked {
+    border: 2px solid var(--radio-button-color, $color-blue);
+  }
+
+  input[type="radio"]:checked:not(:disabled):hover {
+    border-color: var(--radio-button-hover-color, $color-dark-blue);
+  }
+
+  input[type="radio"]::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: scale(0);
+    background: var(--radio-button-color, $color-blue);
+  }
+
+  input[type="radio"]:checked::before {
+    transform: scale(1);
+  }
+
+  input[type="radio"]:checked:not(:disabled):hover::before {
+    background: var(--radio-button-hover-color, $color-dark-blue);
+  }
+}