@vc-shell/framework 1.1.1 → 1.1.2

package/dist/assets/css/ui-helpers-bOoNv5dS.css

@@ -0,0 +1,37 @@
+:root {
+  --hint-color: var(--neutrals-500);
+  --hint-font-size: 12px;
+}
+.vc-hint {
+  color: var(--hint-color);
+  font-size: var(--hint-font-size);
+}:root {
+  --tooltip-background-color: var(--additional-50);
+  --tooltip-border-color: var(--neutrals-200);
+  --tooltip-shadow-color: var(--secondary-300);
+  --tooltip-shadow: 1px 1px 8px rgba(var(--tooltip-shadow-color), 0.25);
+  --tooltip-text-color: var(--neutrals-600);
+}
+.vc-tooltip__trigger {
+  display: inline-flex;
+  height: 100%;
+  width: 100%;
+}
+.vc-tooltip__content {
+  position: absolute;
+  z-index: 1002;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--tooltip-border-color);
+  background-color: var(--tooltip-background-color);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  font-weight: 400;
+  color: var(--tooltip-text-color);
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}

package/dist/assets/css/ui-indicators-CybQnCoU.css

@@ -0,0 +1,628 @@
+:root {
+  --badge-background-color: var(--accent-500);
+  --badge-text-color: var(--additional-50);
+  --badge-border-color: var(--additional-50);
+  --badge-background-color-hover: var(--neutrals-200);
+  --badge-text-color-hover: var(--neutrals-800);
+  --badge-border-color-hover: var(--primary-300);
+  --badge-background-color-active: var(--neutrals-200);
+  --badge-text-color-active: var(--neutrals-800);
+  --badge-border-color-active: var(--primary-300);
+  --badge-background-color-disabled: var(--neutrals-300);
+  --badge-text-color-disabled: var(--neutrals-500);
+  --badge-border-color-disabled: var(--primary-200);
+  --badge-background-color-primary: var(--primary-500);
+  --badge-background-color-secondary: var(--secondary-500);
+  --badge-background-color-success: var(--success-500);
+  --badge-background-color-warning: var(--warning-500);
+  --badge-background-color-danger: var(--danger-500);
+  --badge-background-color-info: var(--info-500);
+  --badge-size-small: 17px;
+  --badge-size-medium: 20px;
+  --badge-distance-top-small: -8px;
+  --badge-distance-right-small: -10px;
+  --badge-distance-top-medium: -8px;
+  --badge-distance-right-medium: -10px;
+  --badge-border-radius: 9999px;
+  --badge-dot-size-small: 8px;
+  --badge-dot-size-medium: 10px;
+}
+.vc-badge--small .vc-badge__badge {
+  height: var(--badge-size-small);
+  min-width: var(--badge-size-small);
+  top: var(--badge-distance-top-small);
+  right: var(--badge-distance-right-small);
+}
+.vc-badge--small .vc-badge__badge.vc-badge__badge--dot {
+  height: var(--badge-dot-size-small);
+  min-width: var(--badge-dot-size-small);
+  width: var(--badge-dot-size-small);
+}
+.vc-badge--medium .vc-badge__badge {
+  height: var(--badge-size-medium);
+  min-width: var(--badge-size-medium);
+  top: var(--badge-distance-top-medium);
+  right: var(--badge-distance-right-medium);
+}
+.vc-badge--medium .vc-badge__badge.vc-badge__badge--dot {
+  height: var(--badge-dot-size-medium);
+  min-width: var(--badge-dot-size-medium);
+  width: var(--badge-dot-size-medium);
+}
+.vc-badge__content {
+  position: relative;
+  display: flex;
+}
+.vc-badge__badge {
+  position: absolute;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--badge-border-color);
+  background-color: var(--badge-background-color);
+  font-weight: 600;
+  color: var(--badge-text-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 4px;
+  line-height: 1;
+}
+.vc-badge__text {
+  font-size: 0.625rem;
+  line-height: 0.75rem;
+  line-height: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+.vc-badge__badge--content-long {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+}
+.vc-badge__badge--content-very-long {
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  max-width: 40px;
+}
+.vc-badge__badge--content-very-long .vc-badge__text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.vc-badge__badge--dot {
+  padding: 0px;
+}
+.vc-badge__badge--primary {
+  background-color: var(--badge-background-color-primary);
+}
+.vc-badge__badge--success {
+  background-color: var(--badge-background-color-success);
+}
+.vc-badge__badge--warning {
+  background-color: var(--badge-background-color-warning);
+}
+.vc-badge__badge--danger {
+  background-color: var(--badge-background-color-danger);
+}
+.vc-badge__badge--info {
+  background-color: var(--badge-background-color-info);
+}
+.vc-badge__badge--secondary {
+  background-color: var(--badge-background-color-secondary);
+}
+.vc-badge__badge--active {
+  border-color: var(--badge-border-color-active);
+  background-color: var(--badge-background-color-active);
+  color: var(--badge-text-color-active);
+}
+.vc-badge__badge--clickable {
+  cursor: pointer;
+}
+.vc-badge__badge--clickable:hover {
+  border-color: var(--badge-border-color-hover);
+  background-color: var(--badge-background-color-hover);
+  color: var(--badge-text-color-hover);
+}
+.vc-badge__badge--disabled {
+  cursor: not-allowed;
+  border-color: var(--badge-border-color-disabled);
+  background-color: var(--badge-background-color-disabled);
+  color: var(--badge-text-color-disabled);
+}
+.vc-badge__badge--disabled:hover {
+  border-color: var(--badge-border-color-disabled);
+  background-color: var(--badge-background-color-disabled);
+  color: var(--badge-text-color-disabled);
+}:root {
+  --loading-marker-color: var(--primary-500);
+}
+.vc-loading-overlay {
+  position: absolute;
+  z-index: 9998;
+  box-sizing: border-box;
+  display: none;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.vc-loading-overlay--active {
+  display: flex !important;
+  --tw-backdrop-blur: blur(3px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+.vc-loading-overlay__content {
+  position: relative;
+  z-index: 1;
+  height: 2.5rem;
+  width: 9rem;
+}
+.vc-loading-overlay__main-marker {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  height: 1rem;
+  width: 1rem;
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@keyframes tw-loadingMarker {
+50% {
+    transform: translateX(96px);
+}
+}
+.vc-loading-overlay__main-marker {
+  animation: tw-loadingMarker 3s infinite;
+  border-radius: 9999px;
+  background-color: var(--loading-marker-color);
+}
+.vc-loading-overlay__markers {
+  margin-top: 0.75rem;
+  margin-left: 2rem;
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+@keyframes tw-loadingMarkers {
+50% {
+    transform: translateX(-31px);
+}
+}
+.vc-loading-overlay__markers {
+  animation: tw-loadingMarkers 3s infinite;
+}
+.vc-loading-overlay__marker {
+  float: left;
+  margin-left: 1rem;
+  display: block;
+  height: 1rem;
+  width: 1rem;
+  border-radius: 9999px;
+  background-color: var(--loading-marker-color);
+}:root {
+  --progressbar-height: 16px;
+  --progressbar-border-radius: 2px;
+  --progressbar-background-color: var(--additional-50);
+  --progressbar-foreground-color: var(--accent-200);
+  --progressbar-border-width: 1px;
+  --progressbar-border-color: var(--neutrals-200);
+  --progressbar-striped-bg: linear-gradient(
+        45deg,
+        transparent 50%,
+        var(--accent-200) 50%,
+        var(--accent-200) 75%,
+        transparent 75%
+      )
+      left/30px 30px repeat-x,
+    var(--accent-50);
+  --progressbar-striped-color: var(--accent-200);
+}
+@keyframes change {
+from {
+    background-position: 0 0;
+}
+to {
+    background-position: 30px 0;
+}
+}
+.vc-progress {
+  box-sizing: border-box;
+  height: var(--progressbar-height);
+  border-radius: var(--progressbar-border-radius);
+  border-width: var(--progressbar-border-width);
+  border-color: var(--progressbar-border-color);
+  background-color: var(--progressbar-background-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.vc-progress__value {
+  height: 100%;
+  background-color: var(--progressbar-foreground-color);
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+}
+.vc-progress--striped .vc-progress__value {
+  background: var(--progressbar-striped-bg);
+  animation: change 1s linear infinite;
+}:root {
+  --status-padding: 4px 14px;
+  --status-padding-extended: 8px;
+  --status-dot-size: 10px;
+  --status-text-color: var(--neutrals-700);
+  --status-border-radius: 20px;
+  --status-border-radius-extended: 4px;
+  --status-border-width: 1px;
+  --status-border-color: var(--neutrals-500);
+  --status-bg-color: var(--additional-50);
+  --status-info-color: var(--additional-950);
+  --status-info-main-color: var(--info-500);
+  --status-info-bg-color: var(--info-50);
+  --status-warning-color: var(--additional-950);
+  --status-warning-main-color: var(--warning-500);
+  --status-warning-bg-color: var(--warning-50);
+  --status-danger-color: var(--additional-950);
+  --status-danger-main-color: var(--danger-500);
+  --status-danger-bg-color: var(--danger-50);
+  --status-success-color: var(--additional-950);
+  --status-success-main-color: var(--success-500);
+  --status-success-bg-color: var(--success-50);
+  --status-light-danger-color: var(--additional-950);
+  --status-light-danger-main-color: var(--danger-300);
+  --status-light-danger-bg-color: var(--danger-50);
+  --status-info-dark-color: var(--additional-50);
+  --status-info-dark-main-color: var(--info-600);
+  --status-info-dark-bg-color: var(--info-600);
+  --status-primary-color: var(--additional-950);
+  --status-primary-main-color: var(--primary-500);
+  --status-primary-bg-color: var(--primary-50);
+}
+.vc-status {
+  box-sizing: border-box;
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  border-width: 1px;
+  border-style: solid;
+  text-align: center;
+  font-size: 0.75rem;
+  line-height: 0.875rem;
+  font-weight: 400;
+  border-radius: var(--status-border-radius);
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  border-width: var(--status-border-width);
+  border-color: var(--status-border-color);
+  background-color: var(--status-bg-color);
+}
+.vc-status.vc-status_dot {
+  height: var(--status-dot-size) !important;
+  width: var(--status-dot-size) !important;
+  max-width: var(--status-dot-size) !important;
+  border-radius: 9999px !important;
+  border-width: 0px !important;
+  padding: 0px !important;
+}
+.vc-status.vc-status_info {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_info::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-info-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_info.vc-status_dot {
+  background-color: var(--status-info-main-color);
+}
+.vc-status.vc-status_info.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_info.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-info-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_info.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_info.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-info-color) !important;
+}
+.vc-status.vc-status_warning {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_warning::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-warning-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_warning.vc-status_dot {
+  background-color: var(--status-warning-main-color);
+}
+.vc-status.vc-status_warning.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_warning.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-warning-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_warning.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_warning.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-warning-color) !important;
+}
+.vc-status.vc-status_danger {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_danger::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-danger-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_danger.vc-status_dot {
+  background-color: var(--status-danger-main-color);
+}
+.vc-status.vc-status_danger.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_danger.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-danger-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_danger.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_danger.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-danger-color) !important;
+}
+.vc-status.vc-status_success {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_success::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-success-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_success.vc-status_dot {
+  background-color: var(--status-success-main-color);
+}
+.vc-status.vc-status_success.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_success.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-success-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_success.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_success.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-success-color) !important;
+}
+.vc-status.vc-status_light-danger {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_light-danger::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-light-danger-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_light-danger.vc-status_dot {
+  background-color: var(--status-light-danger-main-color);
+}
+.vc-status.vc-status_light-danger.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_light-danger.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-light-danger-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_light-danger.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_light-danger.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-light-danger-color) !important;
+}
+.vc-status.vc-status_info-dark {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_info-dark::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-info-dark-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_info-dark.vc-status_dot {
+  background-color: var(--status-info-dark-main-color);
+}
+.vc-status.vc-status_info-dark.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_info-dark.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-info-dark-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_info-dark.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_info-dark.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-info-dark-color) !important;
+}
+.vc-status.vc-status_primary {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+  background-color: var(--status-bg-color);
+  border-color: var(--status-border-color) !important;
+}
+.vc-status.vc-status_primary::before {
+  margin-right: 0.5rem;
+  height: 1rem;
+  width: 1rem;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  background-color: var(--status-primary-main-color);
+  --tw-content: "";
+  content: var(--tw-content);
+}
+.vc-status.vc-status_primary.vc-status_dot {
+  background-color: var(--status-primary-main-color);
+}
+.vc-status.vc-status_primary.vc-status_dot::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_primary.vc-status_extended {
+  justify-content: flex-start;
+  white-space: normal;
+  border-radius: var(--status-border-radius-extended);
+  max-width: 100%;
+  border-style: none;
+  background-color: var(--status-primary-bg-color);
+  padding: var(--status-padding-extended);
+}
+.vc-status.vc-status_primary.vc-status_extended::before {
+  --tw-content: none;
+  content: var(--tw-content);
+}
+.vc-status.vc-status_primary.vc-status_extended .vc-status__content {
+  white-space: normal !important;
+  color: var(--status-primary-color) !important;
+}
+.vc-status__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+  color: var(--status-text-color);
+}
+.vc-status_dot .vc-status__content {
+  display: none;
+}:root {
+  --status-success-main-color: var(--success-400);
+  --status-info-main-color: var(--info-300);
+}
+.vc-status-icon__icon--success {
+  color: var(--status-success-main-color);
+}
+.vc-status-icon__icon--info {
+  color: var(--status-info-main-color);
+}