@notifi-network/notifi-react/dist/index.css.map

React components to access Notifi core services

{"version":3,"sources":["../lib/style/notifi-card-modal.css","../lib/style/connect.css","../lib/style/ftu.css","../lib/style/powered-by-notifi.css","../lib/style/target-inputs.css","../lib/style/toggle.css","../lib/style/nav-header.css","../lib/style/target-list.css","../lib/style/topic-list.css","../lib/style/subscription-value-input.css","../lib/style/loading-animation.css","../lib/style/inbox.css","../lib/style/history.css","../lib/style/target-state-banner.css","../lib/style/error.css","../lib/style/tooltip.css","../lib/style/smartlink.css","../lib/style/theme-dark.css","../lib/style/theme-light.css","../lib/style/index.css"],"sourcesContent":[".notifi-card-modal {\n  color: var(--notifi-font-color);\n  font-family: inherit;\n  background-color: var(--notifi-card-background);\n  border-radius: 0.5rem;\n  position: relative;\n  height: 35rem;\n}\n",".notifi-connect {\n  display: flex;\n  flex-direction: column;\n  border-radius: 6px;\n  overflow: hidden;\n  height: 100%;\n  width: 100%;\n  background-color: var(--notifi-connect-bg);\n}\n\n.notifi-connect-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  display: flex;\n  justify-content: center;\n  padding: 0 2rem;\n  height: 0;\n  padding: 0 3.125rem;\n  align-items: center;\n}\n\n.notifi-connect-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  text-align: center;\n  padding: 2.5rem 1rem 0.5rem 1rem;\n  position: relative;\n}\n\n.notifi-connect-right-cta {\n  position: absolute;\n  top: 2.5rem;\n  right: 1rem;\n  cursor: pointer;\n}\n\n.notifi-connect-description {\n  color: var(--notifi-connect-description-text);\n  font-size: 0.9rem;\n  line-height: 133%;\n  text-align: center;\n  padding: 0 2rem;\n  margin-bottom: 0.5rem;\n}\n\n.notifi-connect-alert-list-container {\n  display: flex;\n  gap: 0.5rem;\n  flex-direction: column;\n}\n\n.notifi-connect-alert-list-alert {\n  font-size: 0.9rem;\n  display: flex;\n  align-items: center;\n}\n\n.notifi-connect-alert-icon {\n  color: var(--notifi-connect-alert-icon);\n  width: 1.5rem;\n  height: 1.5rem;\n  margin-right: 0.5rem;\n  font-weight: 700;\n  stroke-width: 3;\n}\n\n.notifi-connect-hardware-wallet {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 0 2rem;\n  margin-bottom: 0.5rem;\n}\n.notifi-connect-hardware-wallet-label {\n  color: var(--notifi-connect-hardware-wallet-label-text);\n}\n\n.notifi-connect-button {\n  background-color: var(--notifi-connect-button);\n  color: var(--notifi-connect-button-text);\n  border-radius: 0.5rem;\n  padding: 0.9rem 0rem;\n  text-align: center;\n  font-size: 1rem;\n  font-weight: 700;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n  align-items: center;\n  margin: 0.5rem 2rem 0rem 2rem;\n}\n.notifi-connect-button-text.hidden {\n  visibility: hidden;\n}\n.notifi-connect-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.notifi-connect-button-spinner {\n  /* NOTE: intentionally left empty to override (!important is needed) */\n}\n\n.notifi-connect-footer-content {\n  margin: 1rem 2rem 0 2rem;\n  font-size: 0.75rem;\n  text-align: center;\n  line-height: 1.33;\n}\n\n.notifi-connect-footer-content span {\n  color: var(--notifi-connect-footer-content-text);\n}\n\n.notifi-connect-footer-content a {\n  color: var(--notifi-connect-footer-content-text);\n}\n\n.notifi-connect-footer {\n  width: 100%;\n  display: flex;\n  height: 3rem;\n  justify-content: center;\n  align-items: center;\n}\n",".notifi-ftu {\n  display: flex;\n  flex-direction: column;\n  border-radius: 6px;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n.notifi-ftu-views {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n}\n\n.notifi-ftu-footer {\n  width: 100%;\n  display: flex;\n  height: 2.2rem;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--notifi-ftu-footer-bg);\n}\n\n.notifi-ftu-button-container {\n  /* border-top: var(--notifi-ftu-footer-border) 1px solid; */\n  padding: 0.75rem 1.5rem 0 1.5rem;\n  background-color: var(--notifi-ftu-footer-bg);\n}\n\n/* FtuTargetEdit styles */\n.notifi-ftu-target-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.notifi-ftu-target-edit-invalid-email-warning {\n  color: var(--notifi-ftu-target-edit-invalid-email-warning-text);\n  margin: 0 2rem 0.5rem 2rem;\n  height: 1rem;\n  font-size: 0.9rem;\n}\n\n.notifi-ftu-target-edit-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 0; /* a hack of making height the same when children are overflowed */\n}\n\n/* FtuTargetList styles */\n\n.notifi-ftu-target-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.notifi-ftu-target-list-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 0; /* a hack of making height the same when children are overflowed */\n}\n\n/* FtuAlertEdit styles */\n\n.notifi-ftu-alert-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.notifi-ftu-alert-edit-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 0; /* a hack of making height the same when children are overflowed */\n}\n\n/* FTU common style */\n\n.notifi-ftu-alert-edit-button,\n.notifi-ftu-target-list-button,\n.notifi-ftu-target-edit-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.9rem 0;\n  width: 100%;\n  font-weight: 700;\n  color: var(--notifi-ftu-button-text);\n  background-color: var(--notifi-ftu-button);\n  border-radius: 6px;\n  cursor: pointer;\n  position: relative;\n}\n\n.notifi-ftu-alert-edit-button:disabled,\n.notifi-ftu-target-edit-button:disabled,\n.notifi-ftu-target-list-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.notifi-ftu-alert-edit-button-text.hidden,\n.notifi-ftu-target-list-button-text.hidden,\n.notifi-ftu-target-edit-button-text.hidden {\n  visibility: hidden;\n}\n\n.notifi-ftu-alert-edit-button-spinner,\n.notifi-ftu-target-edit-button-spinner,\n.notifi-ftu-target-list-button-spinner {\n  /* NOTE: intentionally left empty to allow override (!important is needed) */\n}\n\n.notifi-ftu-target-list-header {\n  background-color: var(--notifi-ftu-header-bg) !important;\n  border: none !important;\n}\n",".powered-by-notifi {\n  display: flex;\n  cursor: pointer;\n}\n\n.notifi-powered-by-notifi-content {\n  font-size: 0.6rem;\n  margin-right: 0.5rem;\n  opacity: 0.7;\n  color: var(--notifi-powered-by-text);\n}\n\n.powered-by-notifi-logo {\n  width: 0.6rem;\n  height: 0.6rem;\n  margin-right: 0.27rem;\n}\n\n.powered-by-notifi-text {\n  font: 1rem;\n  width: 1.5rem;\n  height: 0.6rem;\n}\n","/* TargetInputField styles */\n\n.notifi-target-input-field {\n  /* To be override */\n  position: relative;\n}\n\n.notifi-target-input-field-label {\n  display: flex;\n  margin-bottom: 0.8rem;\n  color: var(--notifi-font-color);\n  opacity: 0.5;\n  font-size: 1rem;\n  line-height: 1rem;\n}\n\n.notifi-target-input-field-input-container {\n  display: flex;\n  flex-direction: row;\n  /* background-color: var(--notifi-input-field-background); */\n  /* TODO: Change to its own color variable */\n  background-color: var(--notifi-topic-options-item-bg);\n  border-radius: 0.5rem;\n  padding: 1rem;\n  align-items: center;\n  max-height: 1rem;\n  box-sizing: content-box;\n  border: 1.5px solid transparent;\n}\n\n.notifi-target-input-field-input-container.focused {\n  border: 1.5px solid\n    var(--notifi-target-input-field-input-container-focused-border);\n}\n\n.notifi-target-input-field-input-container.warning {\n  border: 1.5px solid\n    var(--notifi-target-input-field-input-container-warning-text);\n}\n\n.notifi-target-input-field-input::placeholder {\n  font-size: 1rem;\n  font-weight: 500;\n  color: var(--notifi-target-input-field-input-placeholder-text);\n}\n\n.notifi-target-input-field-icon {\n  margin-right: 0.8rem;\n  color: rgba(var(--notifi-color-heather), 1);\n}\n\n.notifi-target-input-field-input {\n  flex-grow: 1;\n  font-size: 1rem;\n  line-height: 1rem;\n  background: none;\n  outline: none;\n  border: none;\n  color: var(--notifi-font-color);\n  font-weight: 500;\n}\n",".notifi-toggle-container {\n  --notifi-toggle-size: 16px;\n  --notifi-toggle-padding: 2px;\n  --notifi-toggle-container: calc(\n    var(--notifi-toggle-size) + 2 * var(--notifi-toggle-padding)\n  );\n  position: relative;\n  display: inline-block;\n  width: calc(var(--notifi-toggle-container) + var(--notifi-toggle-size));\n  height: var(--notifi-toggle-container);\n}\n\n.notifi-toggle-input {\n  opacity: 0;\n  width: 0;\n  height: 0;\n}\n\n.notifi-toggle-slider {\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: var(--notifi-toggle-inactive);\n  border-radius: var(--notifi-toggle-container);\n  transition: 0.2s;\n}\n\n.notifi-toggle-slider:before {\n  position: absolute;\n  content: '';\n  height: var(--notifi-toggle-size);\n  width: var(--notifi-toggle-size);\n  left: var(--notifi-toggle-padding);\n  bottom: var(--notifi-toggle-padding);\n  background-color: var(--notifi-toggle-handle);\n  border-radius: 50%;\n  transition: 0.2s;\n}\n\n.notifi-toggle-input:checked + .notifi-toggle-slider {\n  background-color: var(--notifi-toggle-active);\n}\n\n.notifi-toggle-input:checked + .notifi-toggle-slider:before {\n  transform: translateX(calc(var(--notifi-toggle-size)));\n}\n\n.notifi-toggle-slider--disabled {\n  cursor: progress;\n}\n",".notifi-nav-header {\n  background-color: var(--notifi-nav-header-background);\n  display: flex;\n  padding: 1rem;\n  border-bottom: 1px solid var(--notifi-ftu-header-border);\n}\n.notifi-nav-header-title.isEmpty::after {\n  content: '_'; /* This is a placeholder in case the title is empty */\n  visibility: hidden;\n}\n.notifi-nav-header-right-cta,\n.notifi-nav-header-left-cta {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  height: 1rem;\n  position: absolute;\n  left: 1rem;\n  top: 1.15rem;\n}\n\n.notifi-nav-header-right-cta {\n  left: unset;\n  right: 1rem;\n}\n\n.notifi-nav-header-title {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-grow: 1;\n  font-weight: 500;\n}\n","/* TargetList styles */\n\n.notifi-target-list {\n  margin: 0 1rem;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  border-radius: 6px;\n  padding: 0.8rem 0 0.8rem 0;\n}\n\n.notifi-target-list-item {\n  align-items: center;\n  background-color: var(--notifi-notifi-target-list-item-bg);\n  border-radius: 6px;\n  position: relative;\n}\n\n.notifi-target-list-item-target {\n  display: flex;\n  align-items: flex-start;\n  margin-right: 0.5rem;\n  max-width: 100%;\n}\n\n.has-remove-button {\n  max-width: 80% !important;\n}\n\n.notifi-target-list-target-verify-message {\n  font-size: 0.9rem;\n  color: var(--notifi-target-list-target-verify-message-text);\n  display: flex;\n  align-items: center;\n}\n\n.notifi-target-list-target-confirmed-message {\n  font-size: 0.875rem;\n  color: var(--notifi-target-list-target-verify-message-text);\n  text-align: center;\n  text-align: center;\n  display: flex;\n  align-items: center;\n}\n\n.notifi-target-list-target-confirmed-message.inbox {\n  text-align: left;\n}\n\n.notifi-target-list-icon {\n  color: rgba(var(--notifi-color-heather), 1);\n  /* width: 24px;\n  height: 24px; */\n  display: flex;\n  align-items: flex-start;\n  margin-right: 0.5rem;\n}\n\n.notifi-target-list-item-target-id {\n  font-size: 0.85rem;\n  font-weight: 600;\n  display: inline;\n  overflow: auto;\n  word-wrap: break-word;\n  padding-right: 25px;\n  letter-spacing: 0.42px;\n  overflow: hidden;\n}\n\n.notifi-target-list-item-remove {\n  position: absolute;\n  top: 1.1rem;\n  right: 1rem;\n  cursor: pointer;\n  font-size: 0.75rem;\n  z-index: 2;\n}\n\n.notifi-target-list-item-remove-link {\n  color: var(--notifi-target-list-remove-text) !important;\n}\n\n/* TargetCta styles */\n\n.notifi-target-cta {\n  display: inline;\n  margin-left: auto;\n}\n\n.no-action-required {\n  margin-left: 0;\n  display: inline-block;\n  width: 0px;\n  height: 16px;\n  border-radius: 10rem;\n  position: relative;\n}\n\n.disabled {\n  cursor: not-allowed !important;\n  opacity: 0.5;\n}\n\n.notifi-target-cta-button {\n  background-color: var(--notifi-target-list-cat-button-bg);\n  color: var(--notifi-target-list-cat-button-text);\n  padding: 0.43rem 0.68rem;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 6px;\n  min-width: 5rem;\n  min-height: 1.1rem;\n  display: flex;\n  justify-content: center;\n  font-size: 0.875rem;\n}\n\n.notifi-target-cta-loading-spinner {\n  border-top: 2px solid rgba(var(--notifi-color-white), 1) !important;\n  border-right: 2px solid rgba(var(--notifi-color-white), 1) !important;\n  height: 0.75rem !important;\n  width: 0.75rem !important;\n}\n\n.notifi-target-cta-link {\n  color: var(--notifi-target-list-cta-link-text);\n  cursor: pointer;\n  display: inline-block;\n  margin-left: 0.5rem;\n  min-height: 1rem;\n}\n\n.notifi-target-cta-action-not-required {\n  color: var(--notifi-target-cta-action-not-require-text);\n  background-color: var(--notifi-target-cta-action-not-require-bg);\n  border-radius: 10rem;\n  stroke-width: 3;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  width: 16px;\n  height: 16px;\n  position: absolute;\n  top: 3px;\n  left: 0.5rem;\n}\n\n.notifi-target-list-item-warning {\n  position: relative;\n  background: var(--notifi-target-list-item-warning-bg);\n  color: var(--notifi-target-list-item-warning-text);\n  border-radius: 0 0 6px 6px;\n  margin-top: -6px;\n  padding: calc(0.37rem + 6px) 1rem 0.37rem 1rem;\n  font-size: 0.875rem;\n}\n.notifi-target-list-item-content {\n  background-color: var(--notifi-notifi-target-list-item-bg);\n  position: relative;\n  padding: 0.62rem 1rem 0.62rem 1rem;\n  border-radius: 6px;\n  display: flex;\n  z-index: 2;\n  min-height: 2rem;\n  align-items: center;\n}\n\n.notifi-target-list-item-input-form {\n  padding: 0 1rem 0.62rem 1rem;\n}\n","/* TopicList styles */\n\n.notifi-topic-list {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  margin: 1rem 1rem;\n}\n\n/* TopicRow styles */\n.notifi-topic-stack-row,\n.notifi-topic-row {\n  padding: 1rem;\n  background-color: var(--notifi-notifi-topic-list-row-bg);\n  border-radius: 6px;\n}\n.notifi-topic-row-base {\n  display: flex;\n  justify-content: space-between;\n}\n\n.notifi-topic-row-content {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n\n.notifi-topic-list-tooltip-container {\n  position: relative;\n  display: flex;\n  margin-left: 0.2rem;\n  margin-bottom: 0.2rem;\n}\n\n.notifi-topic-row-user-inputs-row-container {\n  display: flex;\n  flex-direction: column;\n}\n\n/* TopicOptions styles */\n\n.notifi-topic-options {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n}\n\n.notifi-topic-options-description {\n  margin: 0.5rem 0;\n  font-size: 0.9rem;\n  color: rgba(var(--notifi-color-heather), 1);\n}\n\n.notifi-topic-options-items {\n  border: solid 2px transparent;\n  margin-bottom: 0.5rem;\n  display: flex;\n  flex-grow: 1;\n  gap: 0.5rem;\n}\n\n.notifi-topic-options-item {\n  cursor: pointer;\n}\n\n.notifi-topic-options-item.button {\n  border: 2px solid transparent;\n  border-radius: 6px;\n  background-color: var(--notifi-topic-options-item-bg);\n  color: var(--notifi-topic-options-item-text);\n  height: 3rem;\n  padding: 0rem 1rem;\n  display: flex;\n  align-items: center;\n}\n\n.notifi-topic-options-item.button.selected {\n  border: solid 2px rgba(var(--notifi-color-secondary-light), 1);\n  color: var(--notifi-topic-options-item-selected-text);\n}\n\n.notifi-topic-options-item.radio {\n  display: flex;\n  margin-right: 1rem;\n}\n\n.notifi-topic-options-item.radio::before {\n  content: '';\n  border-radius: 100%;\n  border: 2.5px solid var(--notifi-topic-options-item-radio-before-border);\n  display: inline-block;\n  width: 1rem;\n  height: 1rem;\n  position: relative;\n  top: -0.2em;\n  margin: 3px 0.5rem 0 0;\n  vertical-align: top;\n  cursor: pointer;\n  text-align: center;\n  transition: all 250ms ease;\n}\n\n.notifi-topic-options-item.radio.selected::before {\n  background-color: var(--notifi-topic-option-item-radio-selected-before-bg);\n  box-shadow: inset 0 0 0px 2px var(--notifi-topic-option-radio-inner-ring) !important;\n  border: 2.5px solid\n    var(--notifi-topic-option-item-radio-selected-before-border);\n}\n\n.notifi-topic-options-custom-input {\n  border-radius: 6px;\n  font-size: 1rem;\n  outline: none;\n  background-color: inherit;\n  color: inherit;\n  border: 2px solid transparent;\n  padding: 0 1rem;\n  width: 100%;\n  text-align: center;\n}\n\n.notifi-topic-option-custom-input-container.selected {\n  border: 2px solid rgba(var(--notifi-color-secondary-light), 1);\n  color: var(--notifi-topic-options-item-selected-text);\n}\n\n.notifi-topic-options-custom-input::placeholder {\n  color: var(--notifi-topic-options-item-text);\n  font-size: 1rem;\n  text-align: center;\n}\n\n.notifi-topic-option-custom-input-container {\n  background-color: var(--notifi-topic-options-item-bg);\n  border: 2px solid transparent;\n  display: flex;\n  position: relative;\n  flex-grow: 1;\n  min-width: 0;\n  height: 3rem;\n  border-radius: 6px;\n  color: rgba(var(--notifi-color-heather), 1);\n}\n\n.notifi-topic-option-custom-input-prefix,\n.notifi-topic-option-custom-input-suffix {\n  display: none;\n  color: rgba(var(--notifi-color-heather), 1);\n}\n\n.notifi-topic-option-custom-input-container.selected\n  > .notifi-topic-option-custom-input-prefix {\n  position: absolute;\n  left: 0.1rem;\n  top: 0.9rem;\n  display: block;\n  color: var(--notifi-topic-options-item-selected-text);\n}\n\n.notifi-topic-option-custom-input-container.selected\n  > .notifi-topic-option-custom-input-suffix {\n  position: absolute;\n  right: 0.3rem;\n  top: 0.9rem;\n  display: block;\n  color: var(--notifi-topic-options-item-selected-text);\n}\n\n/* TopicStackRow styles */\n\n.notifi-topic-stack-row {\n  padding: 1rem;\n  background-color: var(--notifi-notifi-topic-list-row-bg);\n  border-radius: 6px;\n}\n\n.notifi-topic-stack-header-title {\n  display: flex;\n  align-items: center;\n}\n\n.notifi-topic-stack-header-title {\n  display: flex;\n  align-items: center;\n}\n\n.notifi-topic-stacks {\n  padding: 1rem 0 0 0;\n}\n\n.notifi-topic-stack-row-cta {\n  padding: 1rem 0 0.5rem 0;\n  cursor: pointer;\n  color: var(--notifi-topic-stack-row-cta-text);\n}\n\n/* TopicStack styles */\n.notifi-topic-stack:first-child {\n  border-top: 1px var(--notifi-topic-stack-separator) solid;\n}\n\n.notifi-topic-stack {\n  padding: 0.5rem 0;\n  display: flex;\n  justify-content: space-between;\n  border-bottom: 1px var(--notifi-topic-stack-separator) solid;\n}\n\n.notifi-topic-stack-content {\n}\n\n.notifi-topic-stack-content-title {\n}\n\n.notifi-topic-stack-content-subtitle {\n  display: flex;\n  font-size: 0.9rem;\n  color: var(--notifi-topic-stack-content-subtitle-text);\n}\n\n.notifi-topic-stack-content-subtitle > * {\n  margin-right: 1rem;\n}\n\n.notifi-topic-stack-cta {\n  color: var(--notifi-topic-stack-cta-text);\n  cursor: pointer;\n}\n\n.notifi-topic-stack-cta.disabled {\n  cursor: wait;\n}\n\n/* TopicStackRowInput styles */\n\n.notifi-topic-stack-row-input {\n  margin-top: 0.8rem;\n}\n\n.notifi-topic-stack-row-input-button {\n  text-align: center;\n  margin-top: 0.5rem;\n  background-color: var(--notifi-topic-stack-row-input-button-bg);\n  padding: 0.5rem 0rem;\n  border-radius: 6px;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  position: relative;\n}\n\n.notifi-topic-stack-row-input-button-text {\n  margin: 0.3rem 0;\n  color: var(--notifi-topic-stack-row-input-button-text);\n}\n\n.notifi-topic-stack-row-input-button-text.hidden {\n  visibility: hidden;\n}\n\n.notifi-topic-stack-row-input-button.disabled {\n  background-color: var(--notifi-topic-stack-row-input-button-disabled-bg);\n  cursor: not-allowed;\n}\n\n.notifi-topic-stack-row-input-button-spinner {\n  /* NOTE: intentionally left empty to allow override (!important is needed) */\n}\n",".subscription-value-input-dropdown {\n  position: relative;\n  border-radius: 6px;\n}\n\n.subscription-value-input-dropdown-value {\n  border-radius: 6px;\n  background-color: var(--notifi-subscription-input-dropdown-value-bg);\n  padding: 1rem;\n  cursor: pointer;\n}\n\n.subscription-value-input-dropdown-value-content.unselected {\n  color: grey;\n}\n\n.subscription-value-input-dropdown-icon {\n  position: absolute;\n  top: 50%;\n  right: 0.5rem;\n  top: 1rem;\n}\n\n.subscription-value-input-dropdown-list {\n  position: absolute;\n  bottom: -0.3rem;\n  transform: translateY(100%);\n  left: 0;\n  right: 0;\n  background-color: var(--notifi-subscription-input-dropdown-list-bg);\n  z-index: 1;\n  border-radius: 6px;\n  max-height: 11.5rem;\n  overflow-y: scroll;\n  scrollbar-width: none;\n}\n.subscription-value-input-dropdown-list > * {\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  border-bottom: 1px solid var(--notifi-topic-stack-separator);\n}\n\n.subscription-value-input-dropdown-list > *:last-child {\n  border-bottom: none;\n}\n","/* LoadingAnimation Styles */\n\n/* Spinner */\n\n.notifi-spinner-container {\n  width: 24px;\n  height: 24px;\n}\n.notifi-spinner {\n  border: 4px transparent solid;\n  border-top: 4px var(--notifi-spinner-color) solid;\n  border-radius: 50%;\n  -webkit-animation: spinner 0.6s infinite linear;\n  animation: spinner 0.6s infinite linear;\n  position: absolute;\n}\n\n@-webkit-keyframes spinner {\n  from {\n    -webkit-transform: rotate(0deg);\n  }\n  to {\n    -webkit-transform: rotate(359deg);\n  }\n}\n@keyframes spinner {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n",".notifi-inbox {\n  display: flex;\n  flex-direction: column;\n  border-radius: 6px;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.notifi-inbox-views {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n}\n\n.notifi-inbox-footer {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n/* InboxNavTabs styles */\n\n.notifi-inbox-nav-tabs {\n  width: 100%;\n  display: flex;\n  justify-content: space-around;\n  cursor: pointer;\n  background: var(--notifi-nav-footer-bg);\n  padding: 1rem 0;\n  border-top: var(--notifi-inbox-footer-border) 1px solid;\n}\n\n.notifi-inbox-nav-tabs > div {\n  flex: 1;\n  display: flex;\n  justify-content: center;\n}\n\n/* InboxHistory styles */\n.notifi-inbox-history {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.notifi-inbox-history.hidden {\n  display: none;\n}\n\n/* InboxConfigTopic styles */\n.notifi-inbox-config-topic {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.notifi-inbox-config-topic-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n}\n\n.notifi-inbox-config-topic-banner {\n  margin: 1rem 1rem;\n}\n\n.notifi-inbox-config-topic-title {\n  margin: 0 1rem;\n  color: var(--notifi-inbox-config-topic-title-text);\n  font-size: 0.9rem;\n}\n\n/* InboxConfigTargetList & InboxConfigTargetEdit styles */\n\n.notifi-inbox-config-target-edit {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.notifi-inbox-config-target-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.notifi-inbox-config-target-list-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  /* border-bottom: var(--notifi-inbox-footer-border) 1px solid; */\n}\n\n.notifi-inbox-config-target-edit-button-text.hidden {\n  visibility: hidden;\n}\n\n.notifi-inbox-config-target-edit-button-spinner {\n  /* NOTE: intentionally left empty to allow override */\n}\n\n.notifi-inbox-config-target-list-item {\n  align-items: start;\n}\n\n/* InboxConfigTargetEdit styles */\n.notifi-inbox-config-target-edit-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  border-bottom: var(--notifi-inbox-footer-border) 1px solid;\n}\n\n/* Common styles */\n\n.notifi-inbox-config-target-edit-button,\n.notifi-inbox-config-target-list-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.9rem 0;\n  font-weight: 700;\n  color: var(--notifi-ftu-button-text);\n  background-color: var(--notifi-ftu-button);\n  border-radius: 6px;\n  margin: 1rem 2rem;\n  cursor: pointer;\n  position: relative;\n}\n\n.notifi-inbox-config-target-edit-button:disabled,\n.notifi-inbox-config-target-list-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.notifi-inbox-history-detail-header,\n.notifi-inbox-history-list-header,\n.notifi-inbox-config-topic-header,\n.notifi-inbox-config-target-header {\n  border-bottom: var(--notifi-inbox-header-border) 1px solid !important;\n}\n","/* HistoryList styles */\n.notifi-history-list {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.notifi-history-list.hidden {\n  display: none;\n}\n\n.notifi-history-list-target-state-banner-container {\n  margin: 1rem 1rem 0rem 1rem;\n}\n\n.notifi-history-list-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  padding: 0rem 1rem 1rem 1rem;\n  margin-top: 1rem;\n  scrollbar-width: none;\n}\n\n.notifi-history-list-main.w-banner {\n  margin-top: 0.5rem;\n}\n\n.notifi-history-list-loading-more {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.9rem 0;\n  font-weight: 700;\n  border-radius: 6px;\n  width: 100%;\n  cursor: pointer;\n  position: relative;\n}\n\n.notifi-history-list-loading-more-spinner {\n  /* NOTE: intentionally left empty to allow override */\n}\n\n.notifi-history-list-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n.notifi-history-list-empty-icon {\n  margin-bottom: 1rem;\n  color: var(--notifi-history-list-empty-icon);\n}\n\n.notifi-history-list-empty-title {\n  font-weight: 700;\n  margin-bottom: 0.5rem;\n}\n\n.notifi-history-list-empty-description {\n  font-size: 0.87rem;\n  font-weight: 500;\n  line-height: 1.5;\n  width: 95%;\n  color: var(--notifi-history-list-empty-description-text);\n  text-align: center;\n}\n\n/* HistoryRow styles */\n.notifi-history-row {\n  display: flex;\n  padding: 10px 1rem 10px 0;\n  background-color: var(--notifi-history-row-bg);\n  position: relative;\n  margin-bottom: 0.5rem;\n  border-radius: 6px;\n  cursor: pointer;\n  border: 1px solid transparent;\n}\n\n.notifi-history-row.read {\n  border-radius: 6px;\n}\n\n.notifi-history-row:hover {\n  border: 1px solid var(--notifi-history-row-hover-border);\n}\n\n.notifi-history-row-unread-indicator {\n  background-color: var(--notifi-history-row-unread-indicator);\n  width: 4px;\n  border-radius: 50px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n}\n.notifi-history-row-unread-indicator.read {\n  display: none;\n}\n\n.notifi-history-row-icon {\n  display: flex;\n  justify-content: center;\n  width: 3rem;\n  color: var(--notifi-color-heather);\n}\n\n.notifi-history-row-content {\n  width: 100%;\n}\n\n.notifi-history-row-title {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0.5rem;\n}\n\n.notifi-history-row-title-text {\n  flex-grow: 1;\n  display: flex;\n  justify-content: space-between;\n  color: var(--notifi-history-row-title-text);\n  font-weight: 700;\n}\n\n.notifi-history-row-timestamp {\n  color: var(--notifi-history-row-timestamp-text);\n  font-size: 0.8rem;\n  font-weight: 500;\n}\n\n.notifi-history-row-subject {\n  font-size: 0.9rem;\n  font-weight: 500;\n  color: var(--notifi-history-row-subject-text);\n  /* NOTE: line-clamp: 2; */\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  -webkit-line-clamp: 1;\n}\n\n/* InboxHistoryDetail styles */\n.notifi-history-detail {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background-color: var(--notifi-history-detail-bg);\n}\n.notifi-history-detail.hidden {\n  display: none;\n}\n\n.notifi-history-detail-main {\n  flex-grow: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  scrollbar-width: none;\n}\n\n.notifi-history-detail-subject {\n  font-weight: 800;\n  margin-bottom: 0.5rem;\n  line-height: 1.5;\n}\n\n.notifi-history-detail-timestamp {\n  color: var(--notifi-history-detail-timestamp-text);\n  font-size: 0.8rem;\n  margin-bottom: 1rem;\n}\n\n.notifi-history-detail-message {\n  line-height: 1.5;\n}\n\n.notifi-history-detail-message > p > a {\n  color: var(--notifi-target-input-field-input-container-focused-border);\n  text-decoration: none;\n}\n",".notifi-target-state-banner {\n  background-color: var(--notifi-target-state-banner-bg);\n  border-radius: 6px;\n  cursor: default;\n}\n\n.notifi-target-state-banner-verify {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n}\n.notifi-target-state-banner-verify.history {\n  padding: 0.7rem 0.5rem;\n  background-color: var(--notifi-target-state-banner-verify-history-bg);\n  border-radius: 6px;\n  cursor: default;\n}\n\n.notifi-target-state-banner-verify-icon {\n  color: var(--notifi-target-state-verify-icon-color);\n  width: 1.3rem;\n  height: 1.5rem;\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n}\n.notifi-target-state-banner-verify-icon.history {\n  color: inherit;\n  stroke: var(--notifi-target-state-banner-verify-icon-color);\n}\n\n.notifi-target-state-banner-verify-content {\n  flex-grow: 1;\n  margin: 0 1rem;\n  width: 0;\n}\n\n.notifi-target-state-banner-verify-title {\n  margin-bottom: 0.2rem;\n}\n\n.notifi-target-state-banner-verify-title.history {\n  font-size: 0.9rem;\n}\n\n.notifi-target-state-banner-verify-description {\n  color: var(--notifi-target-state-banner-verify-description-text);\n  font-size: 0.75rem;\n}\n\n.notifi-target-state-banner-verify-cta {\n  width: 1.5rem;\n  display: flex;\n  justify-content: flex-start;\n  cursor: pointer;\n  color: var(--notifi-target-state-banner-verify-cta-text);\n}\n\n.notifi-target-state-banner-verify-cta.history {\n  padding: 0.5rem;\n  width: 4rem;\n  background-color: var(--notifi-target-state-banner-verify-cta-history-bg);\n  border-radius: 6px;\n  color: inherit;\n  justify-content: center;\n  font-size: 0.9rem;\n}\n\n.notifi-target-state-banner-signup {\n  display: flex;\n  align-items: center;\n  padding: 0.7rem 1rem;\n  flex-direction: row;\n  background-color: var(--notifi-target-state-banner-signup-history-bg);\n  border-radius: 6px;\n}\n\n.notifi-target-state-banner-signup-content {\n  display: flex;\n  align-items: center;\n  width: 70%;\n  margin-bottom: 0.5rem;\n  margin-bottom: 0;\n}\n\n.notifi-target-state-banner-signup-text {\n  font-size: 0.9rem;\n  line-height: 1.3;\n}\n\n.notifi-target-state-banner-signup-icon {\n  color: var(--notifi-target-state-banner-signup-icon-color);\n  margin-right: 0.8rem;\n  color: inherit;\n}\n\n.notifi-target-state-banner-signup-cta {\n  color: rgba(var(--notifi-color-white), 1);\n  background-color: var(--notifi-target-state-banner-signup-cta-bg);\n  padding: 0.5rem 1rem;\n  border-radius: 6px;\n  cursor: pointer;\n  font-size: 0.9rem;\n  width: 7rem;\n}\n",".notifi-error-global {\n  display: flex;\n  flex-direction: column;\n  border-radius: 6px;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.notifi-ftu-target-edit-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 0; /* a hack of making height the same when children are overflowed */\n}\n\n.notifi-error-global-error-title {\n  color: var(--notifi-error-global-error-title-text);\n  margin: 1rem;\n  font-size: 1.1rem;\n  font-weight: 600;\n}\n\n.notifi-error-global-error-main {\n  flex-grow: 1;\n  overflow: scroll;\n  scrollbar-width: none;\n  height: 0; /* a hack of making height the same when children are overflowed */\n}\n\n.notifi-error-global-error-detail {\n  margin: 1rem;\n}\n\n.notifi-error-footer {\n  width: 100%;\n  display: flex;\n  height: 2.2rem;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--notifi-ftu-footer-bg);\n}\n",".notifi-tooltip-container {\n  display: inline-block;\n  position: relative;\n  height: 1rem;\n  width: 1rem;\n}\n\n.notifi-tooltip-content {\n  padding: 1rem;\n  border-radius: 6px;\n  background-color: var(--notifi-target-list-tooltip-bg);\n  border: var(--tooltip-content-border) 1px solid;\n  width: 10rem;\n  position: absolute;\n  display: none;\n  text-align: left;\n  z-index: 3;\n  color: var(--tooltip-content-text);\n}\n\n.notifi-tooltip-content > a {\n  color: var(--tooltip-content-a-text);\n}\n\n.notifi-tooltip-icon:hover ~ .notifi-tooltip-content.top-right,\n.notifi-tooltip-content.top-right:hover {\n  top: 1.5rem;\n  right: -1rem;\n  display: block;\n}\n\n.notifi-tooltip-icon:hover ~ .notifi-tooltip-content.top-left,\n.notifi-tooltip-content.top-left:hover {\n  top: 1.5rem;\n  left: -1rem;\n  display: block;\n}\n\n.notifi-tooltip-icon:hover ~ .notifi-tooltip-content.bottom-right,\n.notifi-tooltip-content.bottom-right:hover {\n  bottom: 1.5rem;\n  right: -1rem;\n  display: block;\n}\n\n.notifi-tooltip-icon:hover ~ .notifi-tooltip-content.bottom-left,\n.notifi-tooltip-content.bottom-left:hover {\n  bottom: 1.5rem;\n  left: -1rem;\n  display: block;\n}\n.notifi-tooltip-icon:hover {\n  color: var(--tooltip-icon-color-hover);\n}\n\n.notifi-tooltip-icon {\n  margin-bottom: -5px;\n}\n","/* NotifiSmartLink styles */\n\n.notifi-smartlink {\n  color: var(--notifi-font-color);\n  font-family: inherit;\n  background-color: var(--notifi-smartlink-background);\n  position: relative;\n  border-radius: 8px;\n}\n\n.notifi-smartlink-error {\n  height: 20rem;\n  position: relative;\n}\n\n.notifi-smartlink-banner,\n.notifi-smartlink-image {\n  width: 100%;\n  border-radius: 8px;\n  margin-bottom: 0.75rem;\n  object-fit: contain;\n}\n\n.notifi-smartlink-name {\n  display: flex;\n  color: var(--notifi-smartlink-name-text);\n  margin: 0rem 2rem 0.75rem 2rem;\n}\n.notifi-smartlink-namelogo {\n  border-radius: 50rem;\n  width: 1.75rem;\n  height: 1.75rem;\n  margin-right: 0.5rem;\n}\n.notifi-smartlink-name-text {\n  display: flex;\n  align-items: center;\n  letter-spacing: -0.185px;\n}\n\n.notifi-smartlink-title {\n  font-size: 1.375rem;\n  font-weight: 700;\n  margin: 0 2rem 0.5rem 2rem;\n  letter-spacing: -0.185px;\n}\n\n.notifi-smartlink-subtitle {\n  font-size: 1.125rem;\n  letter-spacing: -0.185px;\n  color: var(--notifi-smartlink-subtitle-text);\n  margin: 0 2rem 0 2rem;\n}\n\n.notifi-smartlink-component {\n}\n\n.notifi-smartlink-component .notifi-smartlink-action {\n  padding: 1rem 2rem 1rem 2rem;\n}\n\n.notifi-smartlink-component .notifi-smartlink-text {\n  padding: 1rem 2rem 0.5rem 2rem;\n}\n\n.notifi-smartlink-text {\n  font-size: 1.125rem;\n  font-weight: 700;\n  letter-spacing: -0.185px;\n}\n\n/* SmartLinkAction styles*/\n\n.notifi-smartlink-action {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.notifi-smartlink-action-btn {\n  padding: 0.5rem;\n  background-color: var(--notifi-smartlink-action-btn-bg);\n  border-radius: 4px;\n  color: var(--notifi-smartlink-action-btn-text);\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.notifi-smartlink-action-btn:disabled {\n  background-color: var(--notifi-smartlink-action-btn-disabled-bg);\n  cursor: not-allowed;\n}\n\n.notifi-smartlink-action-btn-text.notifi-smartlink-action-btn-txt-hidden {\n  visibility: hidden;\n}\n\n.notifi-smartlink-action-btn-loading-spinner {\n  width: 20px;\n  height: 20px;\n}\n\n/* SmartLinkActionInputTextBox styles*/\n.notifi-smartlink-action-input-textbox {\n}\n\n.notifi-smartlink-action-input-textbox-constraint-prompt {\n  font-size: 0.75rem;\n  color: var(--notifi-smartlink-action-input-textbox-constraint-prompt-text);\n  text-align: right;\n  font-weight: 600;\n}\n\n.notifi-smartlink-action-input-textbox-container {\n  display: flex;\n  background-color: var(--notifi-smartlink-action-input-textbox-container-bg);\n  border-radius: 6px;\n  align-items: center;\n  padding: 1rem;\n}\n\n.notifi-smartlink-action-input-textbox-container.invalid {\n  box-shadow: 0 0 0 1px\n    var(--notifi-smartlink-action-input-textbox-container-invalid-border);\n}\n\n.notifi-smartlink-action-input-textbox-input {\n  flex: 1;\n}\n\n.notifi-smartlink-action-input-textbox-input::placeholder {\n  color: var(--notifi-smartlink-action-input-textbox-input-placeholder-text);\n}\n\n.notifi-smartlink-action-input-textbox-prefix {\n  margin-right: 0.5rem;\n  color: rgb(var(--notifi-color-dusk));\n}\n\n.notifi-smartlink-action-input-textbox-suffix {\n  color: rgb(var(--notifi-color-dusk));\n}\n\n/* ActionInputCheckBox Styles */\n.notifi-smartlink-action-input-checkbox {\n}\n\n.notifi-smartlink-action-input-checkbox-container {\n  display: flex;\n  gap: 0.75rem;\n  align-items: flex-start;\n  letter-spacing: -0.185px;\n}\n\n.notifi-smartlink-action-input-checkbox-input {\n  flex-shrink: 0;\n  flex-grow: 0;\n  transform: scale(1.5);\n  accent-color: rgb(var(--notifi-color-secondary-light));\n}\n",".notifi-theme-dark {\n  --notifi-font-color: rgba(var(--notifi-color-white), 1);\n  --notifi-card-background: rgb(var(--notifi-color-dark));\n  --notifi-connect-bg: rgb(var(--notifi-color-dark));\n  --notifi-connect-button: rgba(var(--notifi-color-white), 1);\n  --notifi-connect-button-text: rgb(var(--notifi-color-midnight));\n  --notifi-connect-alert-icon: rgb(var(--notifi-color-seaglass));\n  --notifi-ftu-header-bg: rgba(var(--notifi-color-dark), 0);\n  --notifi-input-field-background: rgb(var(--notifi-color-grey2));\n  --notifi-toggle-inactive: rgb(var(--notifi-color-dusk));\n  --notifi-toggle-active: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-toggle-handle: rgba(var(--notifi-color-white), 1);\n  --notifi-nav-header-background: rgba(var(--notifi-color-grey2), 0);\n  --notifi-ftu-button-text: rgb(var(--notifi-color-midnight));\n  --notifi-ftu-button: rgba(var(--notifi-color-white), 1);\n  --notifi-target-list-cat-button-bg: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-target-list-cat-button-text: rgba(var(--notifi-color-white), 1);\n  --notifi-target-list-cta-link-text: rgba(var(--notifi-color-white), 1);\n  --notifi-notifi-target-list-item-bg: rgb(var(--notifi-color-grey2));\n  --notifi-notifi-topic-list-row-bg: rgb(var(--notifi-color-grey2));\n  --notifi-topic-options-item-bg: rgb(var(--notifi-color-grey1));\n  --notifi-topic-options-item-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-topic-option-radio-bg: rgb(var(--notifi-color-grey1));\n  --notifi-subscription-input-dropdown-value-bg: rgb(var(--notifi-color-grey1));\n  --notifi-subscription-input-dropdown-list-bg: rgb(var(--notifi-color-grey1));\n  --notifi-spinner-color: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-topic-stack-row-input-button-bg: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-topic-stack-row-input-button-text: rgba(\n    var(--notifi-color-white),\n    1\n  );\n  --notifi-nav-footer-bg: rgb(var(--notifi-color-grey2));\n  --notifi-history-row-bg: rgb(var(--notifi-color-grey2));\n  --notifi-history-row-unread-indicator: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-history-row-title-text: rgba(var(--notifi-color-white), 1);\n  --notifi-history-row-timestamp-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-history-row-subject-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-history-detail-bg: rgb(var(--notifi-color-dark));\n  --notifi-history-detail-timestamp-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-history-list-empty-icon: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-history-list-empty-description-text: rgba(\n    var(--notifi-color-heather),\n    1\n  );\n  --notifi-target-state-banner-bg: rgb(var(--notifi-color-grey2));\n  --notifi-target-state-verify-icon-color: rgba(var(--notifi-color-white), 1);\n  --notifi-inbox-config-topic-title-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-inbox-header-border: rgb(var(--notifi-color-grey7));\n  --notifi-target-list-remove-text: rgb(var(--notifi-color-heather));\n  --notifi-target-cta-action-not-require-text: rgb(var(--notifi-color-green3));\n  --notifi-target-cta-action-not-require-bg: rgba(\n    var(--notifi-color-green3),\n    0.4\n  );\n  --notifi-target-state-banner-signup-icon-color: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-target-state-banner-signup-cta-bg: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-topic-options-item-selected-text: rgba(var(--notifi-color-white), 1);\n  --notifi-topic-option-radio-inner-ring: rgb(var(--notifi-color-grey2));\n  --notifi-topic-list-tooltip-bg: rgb(var(--notifi-color-dark));\n  --notifi-topic-list-tooltip-content-border: rgb(var(--notifi-color-dark));\n  --notifi-target-list-tooltip-bg: rgb(var(--notifi-color-dark));\n  --tooltip-content-border: rgb(var(--notifi-color-dark));\n  --tooltip-content-text: rgba(var(--notifi-color-white), 1);\n  --tooltip-icon-color-hover: rgb(var(--notifi-color-white));\n  --notifi-target-list-item-warning-bg: rgba(var(--notifi-color-grey6), 1);\n  --notifi-target-list-item-warning-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-topic-list-tooltip-icon-color-hover: rgba(\n    var(--notifi-color-white),\n    1\n  );\n  --notifi-input-separator-text: rgb(var(--notifi-color-dusk));\n  --notifi-ftu-footer-bg: rgba(var(--notifi-color-black), 0);\n  --notifi-ftu-footer-border: rgb(var(--notifi-color-grey4));\n  --notifi-ftu-header-border: rgba(var(--notifi-color-grey4), 0);\n  --notifi-target-state-banner-signup-history-bg: rgb(\n    var(--notifi-color-grey5)\n  );\n  --notifi-target-state-banner-verify-history-bg: rgb(\n    var(--notifi-color-grey5)\n  );\n  --notifi-target-state-banner-verify-cta-history-bg: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-target-state-banner-verify-icon-color: rgb(var(--notifi-color-dark));\n  --notifi-inbox-footer-border: rgb(var(--notifi-color-grey4));\n  --notifi-powered-by-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-topic-stack-separator: rgb(var(--notifi-color-grey5));\n  --notifi-topic-stack-row-cta-text: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-target-input-toggle-unavailable-text: rgba(\n    var(--notifi-color-heather),\n    1\n  );\n  --notifi-connect-description-text: rgb(var(--notifi-color-grey3));\n  --notifi-connect-footer-content-text: rgb(var(--notifi-color-grey3));\n  --notifi-history-detail-message-a-text: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-target-input-field-input-container-focused-border: rgba(\n    var(--notifi-color-seaglass-dark)\n  );\n  --tooltip-content-a-text: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-topic-option-item-radio-selected-before-bg: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-topic-option-item-radio-selected-before-border: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-error-global-error-title-text: rgb(var(--notifi-color-error));\n  --notifi-ftu-target-edit-invalid-email-warning-text: rgb(\n    var(--notifi-color-error)\n  );\n  --notifi-target-input-field-input-container-warning-text: rgb(\n    var(--notifi-color-error)\n  );\n  --notifi-history-row-hover-border: rgb(var(--notifi-color-dusk));\n  --notifi-target-input-field-input-placeholder-text: rgb(\n    var(--notifi-color-dusk)\n  );\n  --notifi-target-state-banner-verify-cta-text: rgb(var(--notifi-color-dusk));\n  --notifi-topic-options-item-radio-before-border: rgb(\n    var(--notifi-color-dusk)\n  );\n  --notifi-topic-stack-row-input-button-disabled-bg: rgb(\n    var(--notifi-color-dusk)\n  );\n  --notifi-topic-stack-content-subtitle-text: rgb(\n    var(--notifi-color-text-light)\n  );\n  --notifi-topic-stack-cta-text: rgb(var(--notifi-color-text-light));\n  --notifi-target-state-banner-verify-description-text: rgb(\n    var(--notifi-color-rose)\n  );\n  /* SmartLink colors variables */\n  --notifi-smartlink-background: rgb(var(--notifi-color-white));\n  --notifi-smartlink-name-text: rgb(var(--notifi-color-dusk));\n  --notifi-smartlink-subtitle-text: rgb(var(--notifi-color-dusk));\n  --notifi-smartlink-action-btn-bg: rgb(var(--notifi-color-midnight));\n  --notifi-smartlink-action-btn-disabled-bg: rgba(\n    var(--notifi-color-midnight),\n    0.4\n  );\n  --notifi-smartlink-action-btn-text: white;\n  --notifi-smartlink-action-input-textbox-container-bg: rgb(\n    var(--notifi-color-eggshell)\n  );\n  --notifi-smartlink-action-input-textbox-container-invalid-border: rgb(\n    var(--notifi-color-error)\n  );\n  --notifi-smartlink-action-input-textbox-constraint-prompt-text: rgb(\n    var(--notifi-color-heather)\n  );\n  --notifi-smartlink-action-input-textbox-input-placeholder-text: rgb(\n    var(--notifi-color-dusk)\n  );\n}\n",".notifi-theme-light {\n  --notifi-font-color: rgb(var(--notifi-color-midnight));\n  --notifi-card-background: rgb(var(--notifi-color-cloud));\n  --notifi-connect-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-connect-button: rgb(var(--notifi-color-midnight));\n  --notifi-connect-button-text: rgba(var(--notifi-color-white), 1);\n  --notifi-connect-alert-icon: rgba(var(--notifi-color-secondary-light), 1);\n  --notifi-ftu-header-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-input-field-background: rgba(var(--notifi-color-white), 1);\n  --notifi-toggle-inactive: rgba(var(--notifi-color-heather), 1);\n  --notifi-toggle-active: rgba(var(--notifi-color-secondary-light), 1);\n  --notifi-toggle-handle: rgba(var(--notifi-color-white), 1);\n  --notifi-nav-header-background: rgba(var(--notifi-color-white), 1);\n  --notifi-ftu-button-text: rgba(var(--notifi-color-white), 1);\n  --notifi-ftu-button: rgb(var(--notifi-color-midnight));\n  --notifi-target-list-cat-button-bg: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-target-list-cat-button-text: rgba(var(--notifi-color-white), 1);\n  --notifi-target-list-cta-link-text: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-notifi-target-list-item-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-notifi-topic-list-row-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-topic-options-item-bg: rgb(var(--notifi-color-eggshell));\n  --notifi-topic-options-item-text: rgb(var(--notifi-color-dusk));\n  --notifi-topic-option-radio-inner-ring: rgb(var(--notifi-color-light));\n  --notifi-topic-option-radio-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-subscription-input-dropdown-value-bg: rgb(\n    var(--notifi-color-eggshell)\n  );\n  --notifi-subscription-input-dropdown-list-bg: rgb(\n    var(--notifi-color-eggshell)\n  );\n  --notifi-spinner-color: rgb(var(--notifi-color-seaglass-dark));\n  --notifi-topic-stack-row-input-button-bg: rgb(\n    var(--notifi-color-seaglass-dark)\n  );\n  --notifi-topic-stack-row-input-button-text: rgba(\n    var(--notifi-color-white),\n    1\n  );\n  --notifi-nav-footer-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-history-row-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-history-row-unread-indicator: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-history-row-title-text: rgb(var(--notifi-color-midnight));\n  --notifi-history-row-timestamp-text: rgb(var(--notifi-color-dusk));\n  --notifi-history-row-subject-text: rgb(var(--notifi-color-dusk));\n  --notifi-history-detail-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-history-detail-timestamp-text: rgb(var(--notifi-color-dusk));\n  --notifi-history-list-empty-icon: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-history-list-empty-description-text: rgb(var(--notifi-color-dusk));\n  --notifi-target-state-banner-bg: rgba(var(--notifi-color-white), 1);\n  --notifi-target-state-verify-icon-color: rgb(var(--notifi-color-black));\n  --notifi-inbox-config-topic-title-text: rgb(var(--notifi-color-dusk));\n  --notifi-inbox-header-border: rgba(var(--notifi-color-grey7), 0);\n  --notifi-target-list-remove-text: rgb(var(--notifi-color-dusk));\n  --notifi-target-cta-action-not-require-text: rgb(var(--notifi-color-green4));\n  --notifi-target-cta-action-not-require-bg: rgba(\n    var(--notifi-color-green4),\n    0.4\n  );\n  --notifi-target-list-target-verify-message-text: rgb(\n    var(--notifi-color-dusk)\n  );\n  --notifi-target-state-banner-signup-icon-color: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-target-state-banner-signup-cta-bg: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-topic-options-item-selected-text: rgba(\n    var(--notifi-color-secondary-light),\n    1\n  );\n  --notifi-topic-list-tooltip-bg: rgb(var(--notifi-color-eggshell));\n  --notifi-topic-list-tooltip-content-border: rgba(\n    var(--notifi-color-heather),\n    1\n  );\n  --notifi-target-list-tooltip-bg: rgb(var(--notifi-color-eggshell));\n  --tooltip-content-border: rgba(var(--notifi-color-heather), 1);\n  --tooltip-content-text: rgb(var(--notifi-color-black));\n  --tooltip-icon-color-hover: rgb(var(--notifi-color-dusk));\n  --notifi-target-list-item-warning-bg: rgba(var(--notifi-color-black), 0.05);\n  --notifi-target-list-item-warning-text: rgba(var(--notifi-color-dusk), 1);\n  --notifi-topic-list-tooltip-icon-color-hover: rgb(var(--notifi-color-dusk));\n  --notifi-input-separator-text: rgba(var(--notifi-color-heather), 1);\n  --notifi-ftu-footer-bg: rgba(var(--notifi-color-white), 0);\n  --notifi-ftu-footer-border: rgb(var(--notifi-color-cloud));\n  --notifi-ftu-header-border: rgba(var(--notifi-color-cloud), 0);\n  --notifi-target-state-banner-signup-history-bg: rgb(\n    var(--notifi-color-cloud)\n  );\n  --notifi-target-state-banner-verify-history-bg: rgba(\n    var(--notifi-color-cloud),\n    0.5\n  );\n  --notifi-target-state-banner-verify-cta-history-bg: rgba(\n    var(--