@product7/product7-js 0.1.0

package/src/styles/survey.js

@@ -0,0 +1,894 @@
+export const surveyStyles = `
+.feedback-survey-container {
+  display: none;
+}
+
+.feedback-survey-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: var(--z-modal-backdrop);
+  animation: fadeIn var(--transition-slow);
+}
+
+.feedback-survey-backdrop-dark {
+  background: rgba(2, 6, 23, 0.65);
+}
+
+/* ========================================
+   SURVEY CARD
+   ======================================== */
+
+.feedback-survey {
+  position: fixed;
+  z-index: var(--z-modal);
+  background: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  padding: var(--spacing-6);
+  min-width: 320px;
+  max-width: 400px;
+  font-family: inherit;
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity 200ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ========================================
+   DARK THEME — scoped variable overrides
+   ======================================== */
+
+.feedback-survey-theme-dark {
+  /* Aligned with messenger dark theme */
+  --color-white: #0f1317;
+  --color-background: #0f1317;
+  --color-surface: #1a1e24;
+  --color-border: #232930;
+  --color-neutral-50: #1a1e24;
+  --color-neutral-100: #1a1e24;
+  --color-neutral-200: #232930;
+  --color-neutral-300: #2d343c;
+  --color-neutral-400: #555555;
+  --color-neutral-500: #777777;
+  --color-neutral-900: #e8e8e8;
+  --color-text-primary: #e8e8e8;
+  --color-text-secondary: #999999;
+  --color-text-tertiary: #666666;
+  /* Survey-specific tokens */
+  --color-primary-light: rgba(21, 94, 239, 0.18);
+  --color-primary-border: rgba(21, 94, 239, 0.4);
+  --color-error-light: rgba(239, 68, 68, 0.15);
+  --color-error-border: rgba(239, 68, 68, 0.25);
+  --color-error-dark: #fca5a5;
+}
+
+/* ========================================
+   POSITION VARIANTS + ENTRANCE STATES
+   ======================================== */
+
+.feedback-survey-right {
+  bottom: var(--spacing-6);
+  right: var(--spacing-6);
+  transform: translateY(10px);
+}
+
+.feedback-survey-left {
+  bottom: var(--spacing-6);
+  left: var(--spacing-6);
+  transform: translateY(10px);
+}
+
+.feedback-survey-center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0.97);
+}
+
+
+/* ========================================
+   CLOSE BUTTON
+   ======================================== */
+
+.feedback-survey-close {
+  position: absolute;
+  top: var(--spacing-4);
+  right: var(--spacing-4);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--color-neutral-500);
+  padding: 4px;
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-base);
+}
+
+.feedback-survey-close iconify-icon {
+  display: block;
+}
+
+.feedback-survey-close:hover {
+  background: var(--color-neutral-100);
+  color: var(--color-neutral-900);
+}
+
+.feedback-survey-close:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+/* ========================================
+   TYPOGRAPHY
+   ======================================== */
+
+.feedback-survey-title {
+  margin: 0 0 var(--spacing-3) 0;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  padding-right: 36px;
+  color: var(--color-text-primary);
+}
+
+.feedback-survey-description {
+  color: var(--color-text-secondary);
+  margin: 0 0 var(--spacing-4) 0;
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-relaxed);
+}
+
+.feedback-survey-description-primary .feedback-survey-description {
+  color: var(--color-text-primary);
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--line-height-snug);
+  padding-right: 36px;
+}
+
+.feedback-survey-content {
+  margin-bottom: var(--spacing-3);
+}
+
+/* ========================================
+   PROGRESS BAR
+   ======================================== */
+
+.feedback-survey-progress {
+  margin-bottom: var(--spacing-4);
+}
+
+.feedback-survey-progress-track {
+  height: 3px;
+  background: var(--color-neutral-200);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.feedback-survey-progress-fill {
+  height: 100%;
+  background: var(--color-primary);
+  border-radius: var(--radius-full);
+  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ========================================
+   NPS
+   ======================================== */
+
+.feedback-survey-nps {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-1);
+}
+
+.feedback-survey-nps-btn {
+  flex: 1;
+  height: 40px;
+  min-height: unset;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+}
+
+.feedback-survey-nps-btn:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-border);
+  color: var(--color-primary);
+}
+
+.feedback-survey-nps-btn.selected {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-active);
+  transform: scale(1.06);
+  z-index: 1;
+  position: relative;
+}
+
+/* ========================================
+   CSAT
+   ======================================== */
+
+.feedback-survey-csat {
+  display: flex;
+  justify-content: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-2) 0;
+}
+
+.feedback-survey-csat-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 32px;
+  transition: transform var(--transition-fast), opacity var(--transition-fast);
+  padding: var(--spacing-2);
+  min-width: 44px;
+  min-height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg);
+  line-height: 1;
+}
+
+.feedback-survey-csat-btn:hover {
+  transform: scale(1.15);
+}
+
+.feedback-survey-csat-btn.selected {
+  transform: scale(1.2);
+}
+
+.feedback-survey-csat:has(.selected) .feedback-survey-csat-btn:not(.selected) {
+  transform: scale(0.85);
+  opacity: 0.3;
+}
+
+/* ========================================
+   CES SEGMENTED (short scale)
+   ======================================== */
+
+.feedback-survey-ces {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-ces-btn {
+  flex: 1;
+  height: 40px;
+  padding: 0 var(--spacing-2);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+  text-align: center;
+}
+
+.feedback-survey-ces-btn:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-border);
+  color: var(--color-primary);
+}
+
+.feedback-survey-ces-btn.selected {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-active);
+}
+
+/* ========================================
+   CES LIST
+   ======================================== */
+
+.feedback-survey-ces-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-ces-list-btn {
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.feedback-survey-ces-list-btn:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-border);
+  color: var(--color-primary);
+}
+
+.feedback-survey-ces-list-btn.selected {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-active);
+}
+
+/* ========================================
+   SELECTION INDICATOR (choice & CES list)
+   ======================================== */
+
+.feedback-survey-ces-list-btn::after,
+.feedback-survey-page-choice-btn::after {
+  content: '';
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  border: 1.5px solid var(--color-neutral-300);
+  flex-shrink: 0;
+  background: transparent;
+  background-size: 10px 10px;
+  background-repeat: no-repeat;
+  background-position: center;
+  transition: all var(--transition-fast);
+}
+
+.feedback-survey-ces-list-btn.selected::after,
+.feedback-survey-page-choice-btn.selected::after {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6.5 5,9.5 10,3' stroke='white' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+/* ========================================
+   RATING SCALE (generic)
+   ======================================== */
+
+.feedback-survey-rating-scale {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  background: var(--color-white);
+}
+
+.feedback-survey-rating-scale-btn {
+  flex: 1;
+  height: 40px;
+  padding: 0;
+  border: 0;
+  border-right: 1px solid var(--color-neutral-200);
+  border-radius: 0;
+  background: var(--color-white);
+  cursor: pointer;
+  font-size: clamp(14px, 3vw, 18px);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: background var(--transition-fast), color var(--transition-fast);
+  position: relative;
+}
+
+.feedback-survey-rating-scale-btn:last-child {
+  border-right: none;
+}
+
+.feedback-survey-rating-scale-btn:hover {
+  background: var(--color-primary-light);
+  color: var(--color-primary);
+}
+
+.feedback-survey-rating-scale-btn:focus-visible {
+  outline: none;
+  z-index: 1;
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+
+.feedback-survey-rating-scale-btn.selected {
+  background: var(--color-primary-light);
+  color: var(--color-primary-active);
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+
+/* ========================================
+   SCALE LABELS
+   ======================================== */
+
+.feedback-survey-labels {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.feedback-survey-rating-scale + .feedback-survey-labels {
+  margin-top: var(--spacing-3);
+  padding: 0 var(--spacing-1);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+}
+
+/* ========================================
+   FREQUENCY
+   ======================================== */
+
+.feedback-survey-frequency {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-freq-btn {
+  flex: 1;
+  height: 40px;
+  padding: 0 var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+  transition: all var(--transition-fast);
+  font-family: inherit;
+}
+
+.feedback-survey-freq-btn:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-border);
+  color: var(--color-primary);
+}
+
+.feedback-survey-freq-btn.selected {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-active);
+}
+
+/* ========================================
+   FORM INPUTS
+   ======================================== */
+
+.feedback-survey-feedback {
+  margin-top: var(--spacing-4);
+}
+
+.feedback-survey-textarea {
+  width: 100%;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  resize: vertical;
+  height: 80px;
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  box-sizing: border-box;
+  transition: border-color var(--transition-base);
+  outline: none;
+}
+
+.feedback-survey-textarea::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.feedback-survey-textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.feedback-survey-select {
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color var(--transition-base);
+  outline: none;
+}
+
+.feedback-survey-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+.feedback-survey-input {
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  box-sizing: border-box;
+  transition: border-color var(--transition-base);
+  outline: none;
+}
+
+.feedback-survey-input::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.feedback-survey-input:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+/* ========================================
+   MULTI-PAGE TEXT INPUT
+   ======================================== */
+
+.feedback-survey-page-textarea {
+  width: 100%;
+  min-height: 120px;
+  padding: var(--spacing-3);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  background: var(--color-white);
+  color: var(--color-text-primary);
+  box-sizing: border-box;
+  resize: vertical;
+  outline: none;
+  transition: border-color var(--transition-base);
+}
+
+.feedback-survey-page-textarea::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+.feedback-survey-page-textarea:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px var(--color-primary-light);
+}
+
+/* ========================================
+   MULTIPLE CHOICE
+   ======================================== */
+
+.feedback-survey-multiple-choice {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-page-choice-btn {
+  width: 100%;
+  height: 40px;
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+  text-align: left;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all var(--transition-fast);
+}
+
+.feedback-survey-page-choice-btn:hover {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary-border);
+  color: var(--color-primary);
+}
+
+.feedback-survey-page-choice-btn.selected {
+  background: var(--color-primary-light);
+  border-color: var(--color-primary);
+  color: var(--color-primary-active);
+}
+
+/* ========================================
+   LINK PAGE
+   ======================================== */
+
+.feedback-survey-link-page {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+.feedback-survey-link-text {
+  font-size: var(--font-size-base);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-relaxed);
+  margin: 0;
+}
+
+/* ========================================
+   ACTIONS
+   ======================================== */
+
+.feedback-survey-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  margin-top: var(--spacing-4);
+}
+
+.feedback-survey-back {
+  padding: 0 var(--spacing-4);
+  min-height: 40px;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  background: var(--color-surface);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  transition: all var(--transition-fast);
+  flex: 1;
+  white-space: nowrap;
+}
+
+.feedback-survey-back:hover {
+  background: var(--color-neutral-100);
+  border-color: var(--color-neutral-300);
+  color: var(--color-text-primary);
+}
+
+/* ========================================
+   SUBMIT & LINK BUTTON
+   ======================================== */
+
+.feedback-survey-submit {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  min-height: 40px;
+  padding: 0 var(--spacing-4);
+  background: var(--color-primary);
+  color: #ffffff;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: center;
+  transition: all var(--transition-base);
+}
+
+.feedback-survey-submit:hover:not(:disabled) {
+  background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+}
+
+.feedback-survey-submit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.feedback-survey-link-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  width: 100%;
+  min-height: 40px;
+  padding: 0 var(--spacing-4);
+  background: var(--color-primary);
+  color: #ffffff;
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-md);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: center;
+  text-decoration: none;
+  transition: all var(--transition-base);
+}
+
+.feedback-survey-link-btn:hover {
+  background: var(--color-primary-hover);
+  border-color: var(--color-primary-hover);
+  color: var(--color-white);
+  text-decoration: none;
+}
+
+.feedback-survey-link-btn iconify-icon,
+.feedback-survey-submit iconify-icon {
+  flex-shrink: 0;
+  color: #ffffff;
+}
+
+.feedback-survey-back iconify-icon {
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+/* ========================================
+   ERROR
+   ======================================== */
+
+.feedback-survey-error {
+  margin-bottom: var(--spacing-3);
+  background: #D13212;
+  border-radius: var(--radius-md);
+  color: #ffffff;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  padding: var(--spacing-3) var(--spacing-4);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.feedback-survey-error iconify-icon {
+  flex-shrink: 0;
+}
+
+/* ========================================
+   DARK MODE — SELECTED STATE OVERRIDES
+   ======================================== */
+
+.feedback-survey-theme-dark .feedback-survey-ces-list-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-page-choice-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-freq-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-ces-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-nps-btn.selected,
+.feedback-survey-theme-dark .feedback-survey-rating-scale-btn.selected {
+  color: var(--color-text-primary);
+}
+
+/* ========================================
+   PRESS EFFECT
+   ======================================== */
+
+.feedback-survey-close:active,
+.feedback-survey-submit:active,
+.feedback-survey-back:active,
+.feedback-survey-link-btn:active,
+.feedback-survey-ces-btn:active,
+.feedback-survey-ces-list-btn:active,
+.feedback-survey-page-choice-btn:active,
+.feedback-survey-freq-btn:active,
+.feedback-survey-rating-scale-btn:active,
+.feedback-survey-nps-btn:active {
+  transform: translateY(1px);
+  transition-duration: 100ms;
+}
+
+.feedback-survey-nps-btn.selected:active {
+  transform: scale(1.06) translateY(1px);
+}
+
+.feedback-survey-csat-btn:active {
+  transform: scale(1.05) translateY(1px);
+  transition-duration: 100ms;
+}
+
+.feedback-survey-csat-btn.selected:active {
+  transform: scale(1.2) translateY(1px);
+}
+
+/* ========================================
+   NOTIFICATION TOASTS
+   ======================================== */
+
+.product7-notification {
+  position: fixed;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  padding: var(--spacing-3) var(--spacing-5);
+  border-radius: var(--radius-xl);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  z-index: var(--z-notification);
+  box-shadow: var(--shadow-lg);
+  font-family: inherit;
+  color: #fff;
+}
+
+.product7-notification > div {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.product7-notification svg {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.product7-notification-success {
+  background: #037F0C;
+}
+
+.product7-notification-error {
+  background: #D13212;
+}
+
+.product7-notification-warning {
+  background: #FF9900;
+  color: #000;
+}
+
+.product7-notification-info {
+  background: #0972D3;
+}
+
+/* ========================================
+   RESPONSIVE
+   ======================================== */
+
+@media (max-width: 768px) {
+  .feedback-survey {
+    min-width: 288px;
+    padding: var(--spacing-5);
+  }
+
+.feedback-survey-nps-btn {
+    font-size: var(--font-size-xs);
+  }
+
+  .feedback-survey-csat-btn {
+    font-size: 28px;
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .feedback-survey-title {
+    font-size: var(--font-size-lg);
+  }
+
+  .feedback-survey-description-primary .feedback-survey-description {
+    font-size: var(--font-size-md);
+  }
+
+  .feedback-survey-rating-scale-btn {
+    font-size: clamp(13px, 5vw, 16px);
+  }
+
+  .feedback-survey-rating-scale + .feedback-survey-labels {
+    font-size: var(--font-size-xs);
+  }
+}
+`;