react-feedback-surveys 1.0.0 → 1.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/react-feedback-surveys.svg?style=flat-square)](https://www.npmjs.com/package/react-feedback-surveys)
 [![npm downloads](https://img.shields.io/npm/dm/react-feedback-surveys.svg?style=flat-square)](https://www.npmjs.com/package/react-feedback-surveys)
-[![license](https://img.shields.io/npm/l/react-feedback-surveys.svg?style=flat-square)](https://github.com/your-org/feedback-tools/blob/main/LICENSE)
+[![license](https://img.shields.io/npm/l/react-feedback-surveys.svg?style=flat-square)](https://github.com/feedback-tools-platform/react-feedback-surveys/blob/main/LICENSE)
 [![bundle size](https://img.shields.io/bundlephobia/minzip/react-feedback-surveys?style=flat-square)](https://bundlephobia.com/package/react-feedback-surveys)
 
 > Lightweight, customizable survey widgets to collect user feedback in React apps.
@@ -38,6 +38,7 @@
     * [Production build](#production-build)
 - [Roadmap](#roadmap)
 - [Changelog](#changelog)
+- [Credits](#credits)
 - [License](#license)
 
 
@@ -277,7 +278,7 @@ Invoked immediately when the user selects a score on the rating scale — this c
 Use it to persist the rating instantly.  
 The actual `value` returned depends on the survey type:
 
-- **CSAT2:** `1–2`
+- **CSAT2:** `0–1`
 - **CSAT5:** `1–5`
 - **CES7:** `1–7`
 - **NPS10:** `0–10`
@@ -343,11 +344,38 @@ You can override colors and fonts via CSS variables:
 
 ```css
 :root {
-  --ft-color-text: #272522;
-  --ft-color-muted: #667085;
-  --ft-control-bg: #F2F4F7;
-  --ft-shadow-color: rgba(0, 0, 0, 0.2);
+  /* Main text color for headings and body text */
+  --ft-color-text: 30 8% 14%;
+
+  /* Background color for survey widgets */
+  --ft-color-bg: 0 0% 100%;
+
+  /* Muted text color for labels and secondary content */
+  --ft-color-muted: 222 11% 46%;
+
+  /* Error color for validation messages */
+  --ft-color-error: 32 95% 44%;
+
+  /* Border color for inputs and containers */
+  --ft-color-border: 214 14% 83%;
+
+  /* Outline color for focused interactive elements */
+  --ft-color-outline: 218 14% 65%;
+
+  /* Shadow color for depth and elevation effects */
+  --ft-color-shadow: 0 0% 0%;
+
+  /* Background color for input controls and buttons */
+  --ft-color-control: 214 20% 96%;
+
+  /* Z-index for popup overlay positioning */
+  --ft-popup-z-index: 49;
 }
+
+/* Use with hsl() function: */
+/* color: hsl(var(--ft-color-text)); */
+/* background: hsl(var(--ft-color-bg)); */
+/* box-shadow: 0 0 10px hsl(var(--ft-color-shadow) / 20%); */
 ```
 
 Or wrap the survey in your own class and target the generated markup.
@@ -451,6 +479,10 @@ npm run build
 
 For a detailed history of changes, see the [Changelog](https://feedback.tools/react-feedback-surveys/changelog).
 
+## Credits
+
+Emoji icons used in this package are from [Sensa Emoji](https://sensa.co/emoji) — thanks to the Sensa team for creating such a great set of expressive icons.
+
 ## License
 
 MIT © [feedback.tools](https://feedback.tools)

package/dist/index.css

@@ -1 +1 @@
-:root,:host{--ft-color-text: #272522;--ft-color-bg: #FFF;--ft-color-muted: #667085;--ft-control-bg: #F2F4F7;--ft-shadow-color: rgb(0 0 0 / 20%)}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_1xl92_1{position:fixed;margin:0;box-sizing:border-box;max-height:calc(100vh - 48px);padding:0;overflow:auto;background-color:var(--ft-color-bg);border-radius:8px;box-shadow:0 0 10px var(--ft-shadow-color);transform-origin:50% 100%}._animated_1xl92_14{opacity:0;animation:_fadeForward_1xl92_1 .12s ease-in-out forwards}@keyframes _fadeForward_1xl92_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_1xl92_29{top:24px;left:24px}._top_1xl92_29{top:24px}._topRight_1xl92_38{top:24px;right:24px}._right_1xl92_43{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_1xl92_49{right:24px;bottom:24px}._bottom_1xl92_49{bottom:24px}._bottomLeft_1xl92_58{bottom:24px;left:24px}._left_1xl92_63{left:24px}._content_1xl92_67{position:relative;padding:24px}._close_1xl92_72{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_1xl92_72:disabled{cursor:default}._close_1xl92_72{position:absolute;top:24px;right:24px;width:24px;height:24px;color:#98a2b3;transition:color .15s}._close_1xl92_72:hover{color:var(--ft-color-text)}._close_1xl92_72:before,._close_1xl92_72:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_1xl92_72:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_1xl92_72:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1y2fs_1{margin:0 0 12px}._choice_1y2fs_1{display:flex}._choice_1y2fs_1+._choice_1y2fs_1{margin-top:12px}._label_1y2fs_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1y2fs_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1y2fs_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1y2fs_33{height:20px;min-width:20px;border:1px solid #aaa;border-radius:4px}._label_1y2fs_12:hover ._check_1y2fs_33{border-color:var(--ft-color-text)}._checkbox_1y2fs_33:checked+._check_1y2fs_33{position:relative;background-color:var(--ft-color-text);border-color:var(--ft-color-text)}._checkbox_1y2fs_33:checked+._check_1y2fs_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent var(--ft-color-bg) var(--ft-color-bg);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1y2fs_70{margin-top:8px;height:32px}._textarea_1y2fs_75{height:192px}._input_1y2fs_70,._textarea_1y2fs_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:var(--ft-color-bg);border:1px solid #D0D5DD;border-radius:8px;outline:0 solid rgba(152,162,179,.14);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1y2fs_70:focus,._textarea_1y2fs_75:focus{outline:4px solid rgba(152,162,179,.14)}._submit_1y2fs_97{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1y2fs_97:disabled{cursor:default}._submit_1y2fs_97{padding:8px 32px;font-size:16px;font-weight:600;text-align:center;color:var(--ft-color-bg);background-color:var(--ft-color-text);border-radius:8px;transition:opacity .2s}._submit_1y2fs_97:hover{opacity:.85}._submit_1y2fs_97{margin-top:16px;width:100%}._success_1y2fs_129{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_1mrao_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:var(--ft-color-text)}._head_1mrao_7{display:flex;gap:8px;padding:0 32px 20px 0}._title_1mrao_13{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_15ezr_1{margin:10px 0 0;display:flex;justify-content:space-between}._label_15ezr_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:#475467}._label_15ezr_7:first-child{text-align:left}._label_15ezr_7:last-child{text-align:right}._list_dm3po_1{display:flex;justify-content:center;gap:16px}._icon_dm3po_7{transition:transform .12s ease;transform:scale(1)}._button_dm3po_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_dm3po_12:disabled{cursor:default}._button_dm3po_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:#f9fafb;border-radius:50%}._button_dm3po_12:hover ._icon_dm3po_7{transform:scale(1.15)}._base_1uh9h_1{width:100vw;max-width:310px}._list_1j2mw_1{display:flex;justify-content:space-between}._icon_1j2mw_6{transition:transform .12s ease;transform:scale(1)}._button_1j2mw_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1j2mw_11:disabled{cursor:default}._button_1j2mw_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:#f9fafb;border-radius:50%}._button_1j2mw_11:hover ._icon_1j2mw_6{transform:scale(1.15)}._list_f45j5_1{display:flex;justify-content:space-between}._button_f45j5_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_f45j5_6:disabled{cursor:default}._button_f45j5_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:var(--ft-color-muted);background-color:var(--ft-control-bg);border-radius:50%;transition:color .12s ease,transform .12s ease}._button_f45j5_6:hover{color:var(--ft-color-text);transform:scale(1.1)}._list_mtyej_1{display:flex;justify-content:space-between}._icon_mtyej_6{transition:transform .12s ease;transform:scale(1)}._button_mtyej_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_mtyej_11:disabled{cursor:default}._button_mtyej_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_mtyej_11:hover ._icon_mtyej_6{transform:scale(1.1)}._base_1r0wo_1{width:100vw;max-width:320px}._list_1t0bv_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1t0bv_1{flex-direction:column-reverse;gap:4px}}._button_1t0bv_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1t0bv_13:disabled{cursor:default}._button_1t0bv_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:var(--ft-color-muted);background-color:var(--ft-control-bg);border-radius:50%;transition:color .12s ease,transform .12s ease;transform:scale(1)}._button_1t0bv_13:hover{color:var(--ft-color-text);transform:scale(1.1)}@media(max-width:575px){._button_1t0bv_13:hover{transform:none}}._button_1t0bv_13 ._score_1t0bv_49{display:inline}._button_1t0bv_13 ._label_1t0bv_52{display:none}@media(max-width:575px){._button_1t0bv_13 ._label_1t0bv_52{display:inline}}@media(max-width:575px){._button_1t0bv_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1t0bv_72{display:none}}._base_aftyp_1{width:100vw;max-width:340px}._list_1s7yb_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1s7yb_1{flex-direction:column-reverse;gap:4px}}._button_1s7yb_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1s7yb_13:disabled{cursor:default}._button_1s7yb_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:var(--ft-color-muted);background-color:var(--ft-control-bg);border-radius:50%;transition:color .12s ease,transform .12s ease;transform:scale(1)}._button_1s7yb_13:hover{color:var(--ft-color-text);transform:scale(1.1)}@media(max-width:575px){._button_1s7yb_13:hover{transform:none}}._button_1s7yb_13 ._score_1s7yb_49{display:inline}._button_1s7yb_13 ._label_1s7yb_52{display:none}@media(max-width:575px){._button_1s7yb_13 ._label_1s7yb_52{display:inline}}@media(max-width:575px){._button_1s7yb_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1s7yb_72{display:none}}._base_1xgqd_1{width:100%;max-width:520px}
+:root,:host{--ft-color-text: 30 8% 14%;--ft-color-bg: 0 0% 100%;--ft-color-muted: 222 11% 46%;--ft-color-error: 32 95% 44%;--ft-color-border: 214 14% 83%;--ft-color-outline: 218 14% 65%;--ft-color-shadow: 0 0% 0%;--ft-color-control: 214 20% 96%;--ft-popup-z-index: 49}body{margin:0;box-sizing:border-box;padding:0}*,*:before,*:after{margin:0;box-sizing:border-box;padding:0}._base_e6url_1{position:fixed;margin:0;box-sizing:border-box;max-width:calc(100vw - 48px);max-height:calc(100vh - 48px);padding:0;overflow:auto;background-color:hsl(var(--ft-color-bg)/100%);border-radius:8px;box-shadow:0 0 10px hsl(var(--ft-color-shadow)/20%);transform-origin:50% 100%;z-index:var(--ft-popup-z-index)}._animated_e6url_16{opacity:0;animation:_fadeForward_e6url_1 .12s ease-in-out forwards}@keyframes _fadeForward_e6url_1{0%{opacity:0;transform:translateY(8px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}._topLeft_e6url_31{top:24px;left:24px}._top_e6url_31{top:24px}._topRight_e6url_40{top:24px;right:24px}._right_e6url_45{top:50%;right:24px;transform:translateY(-50%)}._bottomRight_e6url_51{right:24px;bottom:24px}._bottom_e6url_51{bottom:24px}._bottomLeft_e6url_60{bottom:24px;left:24px}._left_e6url_65{left:24px}._content_e6url_69{position:relative;padding:24px}@media(max-width:400px){._content_e6url_69{padding:20px}}._close_e6url_79{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._close_e6url_79:disabled{cursor:default}._close_e6url_79{position:absolute;top:24px;right:24px;width:24px;height:24px;color:hsl(var(--ft-color-outline)/100%);transition:color .15s}._close_e6url_79:hover{color:hsl(var(--ft-color-text)/100%)}@media(max-width:400px){._close_e6url_79{right:20px;top:20px}}._close_e6url_79:before,._close_e6url_79:after{position:absolute;top:50%;left:50%;content:"";background-color:currentcolor;border-radius:1px;transform:rotate(45deg)}._close_e6url_79:before{margin:-1px 0 0 -8px;width:16px;height:2px}._close_e6url_79:after{margin:-8px 0 0 -1px;width:2px;height:16px}._choices_1fbp9_1{margin:0 0 12px}._choice_1fbp9_1{display:flex}._choice_1fbp9_1+._choice_1fbp9_1{margin-top:12px}._label_1fbp9_12{position:relative;display:inline-flex;align-items:flex-start;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}._sr_1fbp9_21{position:absolute;margin:-1px;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border-width:0;clip:rect(0,0,0,0)}._checkbox_1fbp9_33{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}._check_1fbp9_33{height:20px;min-width:20px;border:1px solid hsl(var(--ft-color-border)/100%);border-radius:4px}._label_1fbp9_12:hover ._check_1fbp9_33{border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33{position:relative;background-color:hsl(var(--ft-color-text)/100%);border-color:hsl(var(--ft-color-text)/100%)}._checkbox_1fbp9_33:checked+._check_1fbp9_33:after{position:absolute;top:50%;left:50%;width:10px;height:7px;content:"";border:2px solid;border-color:transparent transparent hsl(var(--ft-color-bg)/100%) hsl(var(--ft-color-bg)/100%);transform:translate(-45%,-75%) rotate(-45deg);pointer-events:none}._input_1fbp9_70{margin-top:8px;height:32px}._textarea_1fbp9_75{height:192px}._input_1fbp9_70,._textarea_1fbp9_75{width:100%;padding:8px 12px;font-size:16px;line-height:1.5;background-color:hsl(var(--ft-color-bg)/100%);border:1px solid hsl(var(--ft-color-border)/100%);border-radius:8px;outline:0 solid hsl(var(--ft-color-outline)/14%);resize:none;transition:background-color .15s,border-color .15s,outline-width .2s}._input_1fbp9_70:focus,._textarea_1fbp9_75:focus{outline:4px solid hsl(var(--ft-color-outline)/14%)}._input_1fbp9_70._invalid_1fbp9_96,._textarea_1fbp9_75._invalid_1fbp9_96{border-color:hsl(var(--ft-color-error)/100%)}._submit_1fbp9_101{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._submit_1fbp9_101:disabled{cursor:default}._submit_1fbp9_101{padding:8px 32px;font-size:16px;font-weight:400;text-align:center;color:hsl(var(--ft-color-bg)/100%);background-color:hsl(var(--ft-color-text)/100%);border-radius:8px;transition:opacity .2s}._submit_1fbp9_101:hover{opacity:.85}._submit_1fbp9_101{margin-top:16px;width:100%}._success_1fbp9_133{padding:16px 0 32px;font-size:16px;font-weight:600;line-height:1.5;text-align:center}._base_1ilpx_1{padding:0 24px;text-align:center}._icon_1ilpx_6{display:inline-block}._base_rnauy_1{padding:0;font-family:Helvetica Neue,Arial Nova,Helvetica,Arial,sans-serif;color:hsl(var(--ft-color-text)/100%)}._head_rnauy_7{display:flex;gap:8px;padding:0 32px 20px 0}._title_rnauy_13{flex:1 0;font-family:inherit;font-size:16px;font-weight:500;font-style:normal;line-height:1.4}._base_1o2c3_1{margin:12px 0 0;display:flex;justify-content:space-between}._label_1o2c3_7{flex:0 0 50%;max-width:50%;font-size:14px;line-height:1.4286;color:hsl(var(--ft-color-muted)/100%)}._label_1o2c3_7:first-child{text-align:left}._label_1o2c3_7:last-child{text-align:right}._list_1kcla_1{display:flex;justify-content:center;gap:16px}._icon_1kcla_7{transition:transform .12s ease;transform:scale(1)}._button_1kcla_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1kcla_12:disabled{cursor:default}._button_1kcla_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_1kcla_12{width:48px;height:48px}}._button_1kcla_12:hover ._icon_1kcla_7{transform:scale(1.15)}._list_57k0i_1{display:flex;justify-content:center;gap:16px}._icon_57k0i_7{transition:transform .12s ease;transform:scale(1)}._button_57k0i_12{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_57k0i_12:disabled{cursor:default}._button_57k0i_12{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}._button_57k0i_12:hover ._icon_57k0i_7{transform:scale(1.15)}._base_1oxyv_1{width:100%;max-width:310px}._list_13r41_1{display:flex;justify-content:space-between}._icon_13r41_6{transition:transform .12s ease;transform:scale(1)}._button_13r41_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_13r41_11:disabled{cursor:default}._button_13r41_11{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background-color:hsl(var(--ft-color-control)/100%);border-radius:50%}@media(max-width:400px){._button_13r41_11{width:48px;height:48px}}._button_13r41_11:hover ._icon_13r41_6{transform:scale(1.15)}._list_bzyvn_1{display:flex;justify-content:space-between}._button_bzyvn_6{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_bzyvn_6:disabled{cursor:default}._button_bzyvn_6{display:flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:18px;font-weight:700;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_bzyvn_6:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}._list_mtyej_1{display:flex;justify-content:space-between}._icon_mtyej_6{transition:transform .12s ease;transform:scale(1)}._button_mtyej_11{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_mtyej_11:disabled{cursor:default}._button_mtyej_11{display:flex;align-items:center;justify-content:center;width:40px;height:40px}._button_mtyej_11:hover ._icon_mtyej_6{transform:scale(1.1)}._base_14lcg_1{width:100%;max-width:320px}._list_1n6j6_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1n6j6_1{flex-direction:column-reverse;gap:4px}}._button_1n6j6_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1n6j6_13:disabled{cursor:default}._button_1n6j6_13{display:inline-block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1n6j6_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1n6j6_13:hover{box-shadow:none}}._button_1n6j6_13 ._score_1n6j6_49{display:inline}._button_1n6j6_13 ._label_1n6j6_52{display:none}@media(max-width:575px){._button_1n6j6_13 ._label_1n6j6_52{display:inline}}@media(max-width:575px){._button_1n6j6_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1n6j6_72{display:none}}._base_cn8p7_1{width:100%;max-width:340px}._list_1cqoz_1{display:flex;justify-content:space-between;gap:6px}@media(max-width:575px){._list_1cqoz_1{flex-direction:column-reverse;gap:4px}}._button_1cqoz_13{margin:0;appearance:none;padding:0;font-family:inherit;text-align:center;background-color:transparent;border:none;box-shadow:none;cursor:pointer}._button_1cqoz_13:disabled{cursor:default}._button_1cqoz_13{display:block;width:40px;height:40px;font-size:18px;font-weight:700;text-align:center;color:hsl(var(--ft-color-muted)/100%);background-color:hsl(var(--ft-color-control)/100%);border-radius:50%;box-shadow:0 0 hsl(var(--ft-color-control)/100%);transition:color .12s ease,box-shadow .12s ease}._button_1cqoz_13:hover{color:hsl(var(--ft-color-text)/100%);box-shadow:0 0 0 2px hsl(var(--ft-color-control)/100%)}@media(max-width:575px){._button_1cqoz_13:hover{box-shadow:none}}._button_1cqoz_13 ._score_1cqoz_49{display:inline}._button_1cqoz_13 ._label_1cqoz_52{display:none}@media(max-width:575px){._button_1cqoz_13 ._label_1cqoz_52{display:inline}}@media(max-width:575px){._button_1cqoz_13{width:100%;height:auto;padding:6px;font-size:14px;line-height:20px;border-radius:6px}}@media(max-width:575px){._labels_1cqoz_72{display:none}}._base_1xgqd_1{width:100%;max-width:520px}