@expressms/smartapp-ui 1.1.8 → 2.0.0

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

@@ -1,1639 +0,0 @@
-@import '~animate.css/animate';
-@import 'react-datepicker/dist/react-datepicker';
-
-$color-black: rgba(17, 17, 17, 1);
-$color-light-black-50: rgba(17, 17, 17, 0.5);
-$color-light-black-30: rgba(17, 17, 17, 0.3);
-$color-light-black-20: rgba(85, 85, 85, 0.2);
-$color-light-black-10: rgba(17, 17, 17, 0.1);
-$color-black-60: rgba(0, 0, 0, 0.6);
-$color-black-20: rgba(0, 0, 0, 0.2);
-$color-black-10: rgba(0, 0, 0, 0.1);
-$color-black-8: rgba(0, 0, 0, 0.08);
-$color-black-5: rgba(0, 0, 0, 0.05);
-$color-darkest-gray: rgba(61, 61, 61, 1);
-$color-darker-gray: rgba(102, 102, 102, 1);
-$color-dark-gray: rgba(128, 128, 128, 1);
-$color-gray: rgba(140, 140, 140, 1);
-$color-light-gray: rgba(204, 204, 204, 1);
-$color-lighter-gray: rgba(224, 228, 236, 1);
-$color-lightest-gray: rgba(239, 242, 244, 1);
-$color-white: rgba(255, 255, 255, 1);
-$color-white-30: rgba(255, 255, 255, 0.3);
-$color-white-5: rgba(255, 255, 255, 0.05);
-$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-orange: rgba(252, 158, 90, 1);
-$color-orange-10: rgba(252, 158, 90, 0.1);
-$color-light-orange: rgba(253, 246, 228, 1);
-
-$popup-background: rgba(37, 77, 145, 0.2);
-$blurred-background: linear-gradient(0deg, rgba(85, 85, 85, 0.8) 0%, rgba(85, 85, 85, 0.8) 100%), rgba(255, 255, 255, 0.01);
-
-.smartapp-action-modal {
-  width: 100%;
-  padding: 0 20px;
-
-  &__ios,
-  &__android {
-    padding: 0;
-  }
-
-  &__content {
-    box-sizing: border-box;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    background-color: $color-white;
-    border-radius: 4px;
-    padding: 24px;
-
-    &--ios,
-    &--android {
-      border-radius: 12px 12px 0 0;
-      padding: 24px 24px 40px 24px;
-    }
-
-    &--cancel-cross {
-      position: absolute;
-      top: 8px;
-      right: 8px;
-      cursor: pointer;
-    }
-
-    &--title {
-      font-family: Open Sans, 'sans-serif';
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 22px;
-      text-align: center;
-      color: $color-black;
-      margin: 8px 0 24px 0;
-
-      &__ios,
-      &__android {
-        margin-top: 0;
-      }
-    }
-
-    &--input {
-      margin-bottom: 24px;
-    }
-
-    &--delimiter {
-      border-top: 0.5px solid $color-light-black-10;
-      margin: 0 -24px 16px -24px;
-    }
-
-    &--buttons {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-    }
-  }
-
-  &__dark {
-    .smartapp-action-modal {
-      &__content {
-        background-color: $color-darkest-gray;
-
-        &--title {
-          color: $color-white;
-        }
-
-        &--delimiter {
-          border-top-color: $color-white-5;
-        }
-      }
-    }
-  }
-}
-
-.action-modal-content {
-  width: 100%;
-  height: 100%;
-  background: var(--action-modal-background, $popup-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.action-modal-ios-content,
-.action-modal-android-content {
-  height: fit-content;
-  border-radius: 12px 12px 0 0;
-  margin: auto 0 0 !important;
-}
-
-.action-modal-ios-overlay,
-.action-modal-android-overlay {
-  background: var(--action-modal-background, $popup-background);
-  cursor: pointer;
-}
-
-.smartapp-attached-file {
-  display: flex;
-  align-items: center;
-  font-family: Open Sans, 'sans-serif';
-  margin-bottom: 8px;
-
-  &--icon {
-    display: flex;
-    align-items: flex-start;
-    margin-right: 4px;
-  }
-
-  &__value {
-    display: flex;
-    flex-direction: row;
-    gap: 12px;
-    width: 100%;
-
-    &--info {
-      &__name {
-        font-weight: 700;
-        font-size: 16px;
-        line-height: 22px;
-        color: $color-black;
-        margin: 0 0 4px 0;
-      }
-
-      &__weight {
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 16px;
-        color: $color-light-black-50;
-        margin: 0;
-      }
-    }
-
-    &--icons {
-      display: flex;
-      align-items: flex-start;
-
-      &__close {
-        cursor: pointer;
-        margin-right: 4px;
-      }
-
-      &__download {
-        cursor: pointer;
-        margin-right: 4px;
-      }
-    }
-  }
-
-  .justify-space-between {
-    justify-content: space-between;
-  }
-}
-
-.smartapp-avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  font-family: Open Sans, 'sans-serif';
-  font-size: 18px;
-  color: $color-white;
-  background: linear-gradient(135deg, $color-purple 0%, $color-dark-red 100%);
-  text-decoration: none;
-  white-space: nowrap;
-  font-weight: 500;
-  border-radius: 50%;
-  cursor: pointer;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    border-radius: 50%;
-  }
-}
-
-.smartapp-button {
-  width: 100%;
-
-  &__standard {
-    cursor: pointer;
-    padding: 12px 32px;
-    border-radius: 8px;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  &__low {
-    cursor: pointer;
-    padding: 5px 32px;
-    border-radius: 3px;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  &__disabled {
-    opacity: 0.3;
-  }
-
-  &__color--blue {
-    font-family: Open Sans, 'sans-serif';
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 19px;
-    text-align: center;
-    color: $color-white;
-    background: $color-blue;
-    border: 0;
-  }
-
-  &__color--white {
-    font-family: Open Sans, 'sans-serif';
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 19px;
-    text-align: center;
-    color: $color-blue;
-    background: $color-white;
-    border: 1px solid $color-blue;
-  }
-
-  &__color--red {
-    font-family: Open Sans, 'sans-serif';
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 19px;
-    text-align: center;
-    color: $color-white;
-    background: $color-red;
-    border: 0;
-  }
-
-  &__dark--blue,
-  &__dark--red {
-    color: $color-darkest-gray;
-  }
-
-  &__dark--white {
-    background-color: $color-darkest-gray;
-  }
-}
-
-.smartapp-calendar-component {
-  position: relative;
-  width: 100%;
-
-  &__icon {
-    position: absolute;
-  }
-
-  .react-datepicker {
-    font-family: Open Sans, 'sans-serif';
-    border-color: $color-light-black-10 !important;
-    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.02), 0 6px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.14) !important;
-    padding-bottom: 24px;
-
-    // Соединитель datepicker с input
-    &__triangle {
-      margin-top: 0 !important;
-    }
-
-    // Контейнер datepicker
-    &__month-container {
-      width: 250px;
-      border-radius: 12px !important;
-    }
-
-    // Голова
-    &__header {
-      background: $color-lightest-gray !important;
-      color: $color-light-black-50;
-      padding: 0;
-      border-bottom: 0;
-    }
-
-    // Месяц
-    &__current-month {
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 19px;
-      color: $color-light-black-50;
-      padding: 8px 0 !important;
-    }
-
-    // Дни названий недель
-    &__day-name {
-      font-weight: 700;
-      font-size: 12px;
-      line-height: 16px;
-      color: $color-light-black-50;
-      margin-top: 16px;
-    }
-
-    // Все дни недели
-    &__day-names {
-      margin: 0;
-      font-weight: 700;
-      font-size: 12px;
-      line-height: 16px;
-      text-transform: uppercase;
-      color: $color-light-black-50 !important;
-      background: $color-white;
-    }
-
-    //  Каждый блок недели
-    &__day-name {
-      margin-right: 3px;
-    }
-
-    // Дни, которые уже прошли
-    &__day--disabled {
-      color: $color-light-gray !important;
-    }
-
-    // Каждый день
-    &__day {
-      margin-right: 3px;
-      color: $color-black;
-      opacity: 0.5;
-      font-weight: 400;
-      font-size: 16px;
-      line-height: 22px;
-
-      &:hover {
-        border-radius: 8px;
-        background-color: $color-light-black-30;
-        color: $color-black;
-      }
-    }
-
-    //  Стрелка
-    &__navigation-icon::before {
-      border-width: 2px 2px 0 0 !important;
-      border-radius: 1px;
-      width: 7px !important;
-      height: 7px !important;
-    }
-
-    // Сегодняшний день
-    &__day--today {
-      background: $color-white;
-      color: $color-black;
-      font-weight: 600;
-      opacity: 1;
-    }
-
-    // Первый выбранный день
-    &__day--keyboard-selected {
-      border-radius: 0;
-      background-color: $color-white;
-    }
-
-    // Выбранный день
-    &__day--selected {
-      background-color: $color-white;
-      color: $color-blue;
-      opacity: 1 !important;
-      font-weight: 800;
-    }
-  }
-
-  // // Сам input для календаря с выбранными датами
-  .smartapp-calendar-input {
-    font-family: Open Sans, 'sans-serif';
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    padding: 12px 16px;
-    border: 1px solid $color-black-5;
-    border-radius: 8px;
-    box-sizing: border-box;
-    width: 100%;
-
-    &__span {
-      color: $color-lighter-gray;
-      margin-right: 5px;
-    }
-  }
-}
-
-.smartapp-check-box {
-  &__custom-check-box {
-    z-index: -1;
-    opacity: 0;
-    position: absolute;
-  }
-
-  .checkmark::before {
-    content: '';
-    display: inline-block;
-    width: 17px;
-    height: 17px;
-    background-color: $color-white;
-    border: 1.5px solid $color-dark-gray;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  /* стили при наведении курсора на радио */
-  &__custom-check-box:not(:disabled):not(:checked) + .checkmark:hover::before {
-    border-color: $color-darker-gray;
-  }
-
-  /* стили для активной радиокнопки (при нажатии на неё) */
-  &__custom-check-box:not(:disabled):active + .checkmark::before {
-    border-color: $color-dark-gray;
-  }
-
-  /* стили для радиокнопки, находящейся в фокусе и не находящейся в состоянии checked */
-  &__custom-check-box:focus:not(:checked) + .checkmark::before {
-    border-color: $color-dark-gray;
-    background-size: 60% 60%;
-  }
-
-  /* стили для радиокнопки, находящейся в состоянии checked */
-  &__custom-check-box:checked + svg {
-    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;
-  }
-}
-
-.smartapp-chips {
-  display: flex;
-  box-sizing: border-box;
-  justify-content: space-between;
-  font-family: Open Sans, 'sans-serif';
-  max-width: 172px;
-  padding: 4px 8px 4px 4px;
-  border-radius: 20px;
-  background-color: $color-lightest-gray;
-
-  &__info {
-    display: flex;
-    align-items: center;
-
-    &--name {
-      color: $color-black;
-      max-width: 105px;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      margin: 0 0 0 8px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  &__cancel-icon {
-    display: flex;
-    cursor: pointer;
-  }
-}
-
-.smartapp-confirmation-modal {
-  width: 100%;
-  padding: 0 20px;
-
-  &__ios,
-  &__android {
-    padding: 0;
-  }
-
-  &__content {
-    box-sizing: border-box;
-    width: 100%;
-    background-color: $color-white;
-    border-radius: 4px;
-    padding: 32px 24px 24px 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: 22px;
-      text-align: center;
-      color: $color-black;
-      margin: 0 0 24px 0;
-    }
-
-    &--text {
-      font-family: Open Sans, 'sans-serif';
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 16px;
-      text-align: center;
-      color: $color-black;
-      margin: 0 0 24px 0;
-    }
-
-    &--delimiter {
-      border-top: 0.5px solid $color-light-black-10;
-      margin: 0 -24px 16px -24px;
-    }
-
-    &--buttons {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      gap: 8px;
-    }
-  }
-}
-
-.confirmation-modal-content {
-  width: 100%;
-  height: 100%;
-  background: var(--confirmation-modal-background, $popup-background);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.confirmation-modal-ios-content,
-.confirmation-modal-android-content {
-  height: fit-content;
-  border-radius: 12px 12px 0 0;
-  margin: auto 0 0 !important;
-}
-
-.confirmation-modal-ios-overlay,
-.confirmation-modal-android-overlay {
-  background: var(--confirmation-modal-background, $popup-background);
-  cursor: pointer;
-}
-
-.smartapp-custom-select {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-family: Open Sans, 'sans-serif';
-  font-size: 14px;
-  line-height: 19px;
-  color: $color-black;
-  width: 100%;
-  cursor: pointer;
-
-  &__placeholder {
-    font-size: 14px;
-    line-height: 19px;
-    text-overflow: ellipsis;
-  }
-
-  &__title {
-    margin-top: 0;
-    margin-bottom: 0;
-    font-weight: 400;
-    font-size: 14px;
-    line-height: 19px;
-    color: $color-black;
-  }
-  .css-1okebmr-indicatorSeparator {
-    width: 0;
-  }
-
-  &__wrapper {
-    outline: none;
-    cursor: pointer;
-    width: 100%;
-  }
-}
-
-.smartapp-custom-select {
-  &__option {
-    display: flex;
-
-    &--avatar {
-      margin: 0 8px;
-    }
-
-    &--info {
-      &__title {
-        font-weight: 700;
-        font-size: 12px;
-        line-height: 16px;
-        margin: 0;
-      }
-
-      &__email {
-        margin: 0;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 16px;
-        color: $color-light-black-50;
-      }
-    }
-  }
-}
-
-.smartapp-drag-drop {
-  &__header {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 20px;
-
-    &--title {
-      margin: 0;
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 19px;
-      color: $color-black;
-    }
-
-    &--counter {
-      margin: 0;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 16px;
-      color: $color-light-black-50;
-    }
-  }
-
-  &__container {
-    &--instance {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 20px;
-
-      &__info {
-        display: flex;
-        cursor: pointer;
-
-        &--name {
-          font-family: Open Sans, 'sans-serif';
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-          border: none;
-          text-decoration: none;
-          outline: none;
-          min-width: 250px;
-          margin: 0;
-
-          &__completed {
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-            margin: 0;
-            border: none;
-            outline: none;
-            text-decoration: line-through;
-            min-width: 250px;
-          }
-        }
-        &--create-subtask {
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-          margin: 0;
-          color: $color-blue;
-        }
-
-        &--create-input {
-          width: 100%;
-          border: none;
-          text-decoration: none;
-          outline: none;
-          font-weight: 400;
-          font-size: 14px;
-          line-height: 20px;
-        }
-      }
-      &__icons {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-      }
-    }
-  }
-}
-
-.mt-65 {
-  margin-top: 65px;
-}
-
-.cp {
-  cursor: pointer;
-}
-
-.smartapp-error {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  font-family: Open Sans, 'sans-serif';
-  background-color: $color-white;
-
-  &__icon {
-    align-items: center;
-    text-align: center;
-    margin-bottom: 40px;
-  }
-
-  &__title {
-    font-weight: 700;
-    font-size: 16px;
-    line-height: 22px;
-    color: $color-black;
-    margin: 0 0 16px 0;
-    word-break: break-word;
-    text-align: center;
-  }
-
-  &__text {
-    margin: 0;
-    font-weight: 400;
-    font-size: 16px;
-    line-height: 22px;
-    color: $color-light-black-50;
-    word-break: break-word;
-    text-align: center;
-  }
-}
-
-.smartapp-header {
-  font-family: Open Sans, 'sans-serif';
-  font-weight: 700;
-  display: flex;
-  justify-content: space-between;
-  padding: 14.5px 0 14.5px 16px;
-
-  &__web {
-    width: calc(100% - 98px);
-    padding-right: 82px;
-  }
-
-  &__ios,
-  &__android {
-    width: calc(100% - 125px);
-    padding-right: 109px;
-  }
-
-  &__info {
-    display: flex;
-    align-items: center;
-
-    &--arrow-back {
-      margin-right: 16px;
-    }
-
-    &--title {
-      margin: 0;
-    }
-  }
-
-  &__icons {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    &--trash {
-      display: flex;
-      align-items: center;
-    }
-
-    &--refresh {
-      cursor: default !important;
-      animation: spin 1s linear infinite;
-    }
-  }
-
-  svg {
-    cursor: pointer;
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.smartapp-input {
-  font-family: Open Sans, 'sans-serif';
-  display: flex;
-  flex-direction: column;
-  position: relative;
-
-  &__title {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 19px;
-    color: $color-black;
-    margin: 0 0 8px 0;
-  }
-
-  &__container {
-    position: relative;
-
-    &--field {
-      width: 100%;
-      box-sizing: border-box;
-      font-family: inherit;
-      font-weight: 400;
-      color: $color-black;
-      border: 1px solid $color-black-5;
-      border-radius: 8px;
-      padding: 13px 16px;
-
-      &__with-clear-button {
-        padding-right: 44px;
-      }
-
-      &::placeholder {
-        font-size: inherit;
-        font-weight: 400;
-        line-height: inherit;
-        color: $color-light-black-30;
-      }
-
-      &:focus-visible {
-        border: 1px solid $color-blue !important;
-        outline: none;
-      }
-    }
-
-    &--eye-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0;
-      padding: 0 16px;
-      background: none;
-      border: none;
-      transition: transform var(--timing-default) linear;
-      cursor: pointer;
-      position: absolute;
-      right: 1px;
-      top: 15px;
-      color: $color-gray;
-
-      &:active {
-        transform: scale(0.95);
-      }
-    }
-
-    &--clear-icon {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      right: 16px;
-      margin: auto 0;
-      cursor: pointer;
-    }
-  }
-
-  &__error {
-    font-size: 12px;
-    line-height: 16px;
-    color: $color-light-red;
-    margin: 8px 0 0 0;
-  }
-
-  &__dark {
-    .smartapp-input {
-      &__title {
-        color: $color-white;
-      }
-
-      &__container {
-        &--field {
-          color: $color-white;
-          background: $color-darkest-gray;
-          border-color: $color-black-5;
-
-          &::placeholder {
-            color: $color-white-30;
-          }
-        }
-      }
-    }
-  }
-}
-
-.smartapp-loader-wrapper {
-  font-family: Open Sans, 'sans-serif';
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  &__full-screen {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 100;
-  }
-}
-
-.smartapp-loader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 8px 0;
-
-  &__title {
-    font-weight: 400;
-    text-align: center;
-    color: $color-light-black-30;
-    word-break: break-word;
-    margin: 0;
-
-    &--dark {
-      color: $color-white;
-      opacity: 0.3;
-    }
-  }
-}
-
-.smartapp-profile {
-  position: absolute;
-  padding: 16px;
-  box-sizing: border-box;
-  box-shadow: 2px 2px 6px $color-black-60;
-  max-width: 330px;
-  top: 45px;
-  background-color: $color-white;
-  min-width: 300px;
-
-  &__container {
-    position: relative;
-    display: inline-flex;
-    font-family: Open Sans, 'sans-serif';
-    z-index: 1;
-    max-width: 330px;
-  }
-
-  &__avatar {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    font-size: 18px;
-    color: $color-white;
-    background-color: $color-light-blue;
-    text-decoration: none;
-    white-space: nowrap;
-    font-weight: 500;
-    border-radius: 50%;
-    margin-right: 16px;
-    cursor: pointer;
-  }
-
-  &__current-profile {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    &--info {
-      display: flex;
-      align-items: center;
-
-      &__data {
-        &--username {
-          margin: 0;
-          font-weight: 700;
-          font-size: 14px;
-          line-height: 19px;
-        }
-
-        &--email {
-          margin: 0;
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 16px;
-        }
-      }
-    }
-
-    &--logout {
-      cursor: pointer;
-    }
-  }
-  &__add-profile {
-    display: flex;
-    align-items: center;
-    margin-top: 16px;
-    cursor: pointer;
-
-    &--icon {
-      width: 44px;
-      height: 44px;
-      margin-right: 12px;
-      margin-left: -2px;
-    }
-
-    &--title {
-      margin: 0;
-      color: $color-blue;
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 19px;
-    }
-  }
-}
-
-.smartapp-switcher {
-  font-family: Open Sans, 'sans-serif';
-
-  &__instance {
-    padding: 8px 16px;
-    background: $color-black-5;
-    border-radius: 4px;
-    border: 0;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: -0.01em;
-    color: $color-black-20;
-    text-decoration: none;
-    white-space: nowrap;
-    box-sizing: border-box;
-    cursor: pointer;
-    text-align: center !important;
-    width: 100% !important;
-
-    &--active {
-      background: $color-blue;
-      color: $color-white;
-    }
-  }
-  .slick-slide {
-    margin-right: 5px !important;
-    text-align: center !important;
-    width: 100% !important;
-  }
-  .slick-track {
-    display: flex;
-  }
-}
-
-.smartapp-toggle-wrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  width: fit-content;
-}
-
-.smartapp-toggle {
-  position: relative;
-  display: inline-block;
-  width: 38px;
-  height: 20px;
-
-  input {
-    display: none;
-  }
-}
-
-.smartapp-slider {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border-radius: 69px;
-  background: $color-dark-gray;
-  transition: 0.2s;
-  -webkit-transition: 0.2s;
-  cursor: pointer;
-
-  &__disabled {
-    opacity: 0.3;
-    background: $color-dark-gray !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: $color-darker-gray;
-  }
-}
-
-input:checked + .smartapp-slider {
-  background: var(--toggle-color, $color-blue);
-}
-
-input:checked + .smartapp-slider__disabled {
-  background: var(--toggle-color, $color-blue) !important;
-}
-
-input:checked + .smartapp-slider:hover {
-  background: var(--toggle-hover-color, $color-dark-blue);
-}
-
-input:checked + .smartapp-slider:before {
-  transform: translateX(18px);
-  -ms-transform: translateX(18px);
-  -webkit-transform: translateX(18px);
-}
-
-.smartapp-stories-content {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: $blurred-background;
-  -webkit-backdrop-filter: blur(15px);
-  backdrop-filter: blur(15px);
-  border: none;
-  padding: 0;
-
-  &__background-video {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: $color-black;
-    object-fit: cover;
-    -webkit-filter: brightness(0.8) blur(15px);
-    filter: brightness(0.8) blur(15px);
-    -webkit-transform: scale(1.2, 1.1);
-    transform: scale(1.2, 1.1);
-  }
-
-  & > .smartapp-stories-content__background-video:last-child {
-    -webkit-transform: scale(1.1, 1.1);
-    transform: scale(1.1, 1.1);
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background: var(--background);
-    background-image: var(--background);
-    background-size: cover;
-    -webkit-filter: brightness(0.8) blur(15px);
-    filter: brightness(0.8) blur(15px);
-    -webkit-transform: scale(1.1, 1.1);
-    transform: scale(1.1, 1.1);
-  }
-}
-
-.smartapp-stories {
-  height: 100%;
-  position: relative;
-
-  & > div > div:nth-child(2) > div {
-    width: 100%;
-    height: 100%;
-
-    & > video:first-child {
-      width: 100% !important;
-      height: 100%;
-      z-index: 2;
-    }
-  }
-
-  &:has(> div:first-child > div:nth-child(2) > div:first-child > .smartapp-stories__story > .smartapp-stories__story--loader) {
-    & > div:first-child > div:first-child {
-      opacity: 1 !important;
-    }
-  }
-
-  &__web {
-    width: 400px;
-  }
-
-  &__ios,
-  &__android {
-    width: 100%;
-  }
-
-  &__video {
-    z-index: 1;
-  }
-
-  &__story {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    color: $color-white;
-
-    &--image-bg {
-      background: $color-light-black-20;
-    }
-
-    &--title {
-      font-size: 24px;
-      font-weight: 700;
-      line-height: 33px;
-      margin-bottom: 8px;
-      padding: 0 24px;
-    }
-
-    &--body {
-      font-size: 16px;
-      font-weight: 400;
-      line-height: 24px;
-      padding: 0 24px;
-    }
-
-    &--image {
-      display: flex;
-      justify-content: center;
-      padding: 0 24px;
-      margin-bottom: 32px;
-
-      img {
-        width: 100%;
-      }
-    }
-
-    &--button {
-      position: absolute;
-      bottom: 32px;
-      font-size: 16px;
-      font-weight: 700;
-      line-height: 22px;
-      text-align: center;
-      border-radius: 8px;
-      padding: 12px 32px;
-      cursor: pointer;
-      z-index: 1000;
-
-      &__web {
-        left: 24px;
-        right: 24px;
-      }
-
-      &__ios,
-      &__android {
-        left: 16px;
-        right: 16px;
-      }
-    }
-
-    &--loader {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      svg {
-        animation: loading 1s linear infinite;
-      }
-    }
-  }
-
-  &__animate-right {
-    animation: slideInRight 0.5s;
-  }
-
-  &__animate-left {
-    animation: slideInLeft 0.5s;
-  }
-
-  &__icon {
-    position: absolute;
-    left: 16px;
-    z-index: 1000;
-    cursor: pointer;
-
-    &--web {
-      top: 12px;
-    }
-
-    &--ios {
-      top: 11px;
-    }
-
-    &--android {
-      top: 16px;
-    }
-  }
-}
-
-@media (min-width: 401px) {
-  .smartapp-stories__web > div > div:first-child {
-    max-width: calc(100% - 48px) !important;
-    padding-left: 24px !important;
-    padding-right: 24px !important;
-  }
-}
-
-@keyframes loading {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.smartapp-sync-loader {
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 100px;
-  box-shadow: 0 1px 8px 0 $color-black-5;
-  padding: 8px 12px;
-  margin: 16px auto 0 auto;
-  z-index: 1000;
-  animation: loader-appear 0.25s linear;
-
-  &__text {
-    font-size: 12px;
-    font-weight: 600;
-    line-height: 16px;
-    display: flex;
-    color: $color-black;
-
-    &--dark {
-      color: $color-white;
-    }
-
-    &--dots {
-      width: 1.45ch;
-      display: flex;
-      justify-content: flex-start;
-
-      &__dot {
-        opacity: 0;
-        animation: dot-appear 1s ease-in 1;
-
-        &:nth-child(1) {
-          animation-delay: 0.2s;
-        }
-
-        &:nth-child(2) {
-          animation-delay: 0.4s;
-        }
-
-        &:nth-child(3) {
-          animation-delay: 0.6s;
-        }
-      }
-    }
-  }
-
-  &__icon {
-    animation: loader-spin 1s linear infinite;
-  }
-}
-
-@keyframes loader-appear {
-  from {
-    transform: scale(0);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes dot-appear {
-  0% {
-    opacity: 0;
-  }
-  25% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes loader-spin {
-  to {
-    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;
-    }
-  }
-
-  &__dark {
-    .smartapp-modal {
-      &__content {
-        background-color: $color-darkest-gray;
-
-        &--title {
-          color: $color-white;
-        }
-      }
-    }
-  }
-}
-
-.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 $color-dark-gray;
-    border-radius: 50%;
-    background-color: $color-white;
-    margin: 0;
-    appearance: none;
-    -webkit-appearance: none;
-  }
-
-  input[type="radio"]:not(:disabled):hover {
-    border-color: $color-darker-gray;
-    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);
-  }
-}