:root{--confetti-font-scale: 16px;--confetti-box-padding: 24px;--confetti-max-width: 300px;--confetti-z-index: 2147483647;--confetti-border-color: #e4e4e7;--confetti-border-bottom: 1.5px solid var(--confetti-border-color);--confetti-border-radius: 12px;--confetti-background-color: #ffffff;--confetti-hover-background-color: #f5f5f5;--confetti-box-shadow: 0 4px 6px -4px rgba(16, 24, 40, .1), 0 10px 15px -3px rgba(0, 0, 0, .1);--confetti-focus-shadow: 0 0 0 2px rgba(9, 9, 11, .3);--confetti-submit-button-color: #18181b;--confetti-submit-button-text-color: #fafafa;--confetti-rating-bg-color: white;--confetti-rating-text-color: #09090b;--confetti-rating-active-bg-color: #09090b;--confetti-rating-active-text-color: white;--confetti-indicator-active-bg-color: var(--confetti-rating-text-color);--confetti-indicator-active-dot-color: white;--confetti-text-primary-color: #09090b;--confetti-text-subtle-color: #71717a;--confetti-widget-color: #e0a045;--confetti-widget-text-color: white;--confetti-scrollbar-thumb-color: var(--confetti-border-color);--confetti-scrollbar-track-color: var(--confetti-background-color);--confetti-outline-color: rgba(9, 9, 11, .8);--confetti-input-background: white;--confetti-input-text-color: #020617;--confetti-disabled-button-opacity: .6}.confetti-dialog{width:var(--confetti-max-width);max-height:95dvh;overflow:auto;max-width:100%;background:transparent;position:relative;box-shadow:var(--confetti-box-shadow);border:1px solid var(--confetti-border-color);border-radius:var(--confetti-border-radius);background:var(--confetti-background-color);padding:var(--confetti-box-padding);.confetti-dialog-close {position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: 8px; transition: background .2s; & svg {width: 16px; height: 16px; color: var(--confetti-text-subtle-color);} &:hover {background: rgba(0,0,0,.05);} &:focus-visible {outline: 2px solid var(--confetti-outline-color); outline-offset: 2px;}} .cf-header {.cf-title {padding-right: 20px;}}}.confetti{font-family:var(--confetti-font-family);display:flex;flex-direction:column;gap:16px;color:var(--confetti-text-primary-color);font-size:var(--confetti-font-scale);width:100%;.cf-submit-button {align-self: end; color: var(--confetti-submit-button-text-color); background: var(--confetti-submit-button-color); padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: transform .2s; font-size: .875em; font-weight: 500; line-height: 20px; transition: background .2s ease-out; &:focus-visible {outline: 2px solid var(--confetti-outline-color); outline-offset: 2px;} &[data-disabled] {opacity: var(--confetti-disabled-button-opacity); cursor: not-allowed; transform: none;} &:hover {background: color-mix(in srgb,white 10%,var(--confetti-submit-button-color));} &:active {background: color-mix(in srgb,white 5%,var(--confetti-submit-button-color));}} .sr-only {clip: rect(0,0,0,0); border: 0; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px;} .cf-response-choices {display: flex; flex-direction: column; gap: 12px;} .cf-choice {font-size: 1em; cursor: pointer; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--confetti-border-color); transition: background .2s ease-out; &:hover {background: var(--confetti-hover-background-color);} .cf-choice-label {gap: 8px; display: inline-flex; align-items: center;} .cf-choice-description {font-size: .875em; margin-left: 26px; color: var(--confetti-text-subtle-color);}} .cf-response-choices-tag {flex-direction: row; flex-wrap: wrap; gap: 8px;} .cf-tag-input {display: none; &[data-visible="true"] {display: inline;}} .cf-tag {border-radius: 8px; padding: 6px 12px; font-weight: 500; font-size: .875em; transition: background .2s ease-out,border-color .2s ease-out; &[data-selected="true"] {background: var(--confetti-indicator-active-bg-color); border-color: var(--confetti-indicator-active-bg-color); color: var(--confetti-indicator-active-dot-color);} &[data-focus-visible="true"] {outline: 2px solid var(--confetti-outline-color); outline-offset: 2px;} &:active {scale: .96;}} .cf-radio,.cf-checkbox {cursor: pointer; display: flex; flex-direction: column; position: relative; align-items: start; color: var(--confetti-text-primary-color); forced-color-adjust: none;} .cf-checkbox { --checkmark-color: var(--confetti-indicator-active-dot-color); .cf-checkbox-indicator { background: white; border: 1px solid var(--confetti-border-color); width: 18px; height: 18px; box-sizing: border-box; border-radius: 4px; transition: color .2s ease-out; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } svg { width: calc(100% - 8px); height: calc(100% - 8px); fill: none; stroke: var(--checkmark-color); stroke-width: 3px; stroke-dasharray: 22px; stroke-dashoffset: 66; stroke-linecap: round; stroke-linejoin: round; transition: all .2s; } &[data-focus-visible="true"] { .cf-checkbox-indicator { outline: 2px solid var(--confetti-outline-color); outline-offset: 2px; } } &[data-selected], &[data-indeterminate] { .cf-checkbox-indicator { background: var(--confetti-indicator-active-bg-color); border: none; } svg { stroke-dashoffset: 44; } } &[data-indeterminate] { svg { stroke: none; fill: var(--checkmark-color); } } } .cf-radio {-webkit-tap-highlight-color: transparent; --dot-color: var(--confetti-indicator-active-dot-color); .cf-radio-indicator {position: relative; width: 18px; height: 18px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; transition: color .2s ease-out; border: 1px solid var(--confetti-border-color); background: white; &::after {content: ""; position: absolute; inset: 1px; border-radius: inherit; background: transparent; transition: scale .2s; scale: 0;}} &[data-selected] {.cf-radio-indicator {background: var(--confetti-indicator-active-bg-color); border-color: var(--confetti-indicator-active-bg-color); &::after {background: var(--dot-color); scale: .4;}}} &[data-disabled] {color: var(--text-color-disabled); --dot-color: var(--text-color-disabled);} &[data-focus-visible="true"] {.cf-radio-indicator {outline: 2px solid var(--confetti-outline-color); outline-offset: 2px;}}} .cf-input,.cf-textarea {background: var(--confetti-input-background); border: 1px solid var(--confetti-border-color); border-radius: 8px; color: var(--confetti-input-text-color); padding: 10px; transition: border-color .2s ease-out,box-shadow .2s ease-out,transform .15s ease-out; &:focus {border-color: var(--confetti-outline-color); box-shadow: var(--confetti-focus-shadow); outline: none;}} .cf-question {display: flex; flex-direction: column; gap: 16px; .cf-error {display: none;} .cf-header {display: flex; flex-direction: column; gap: 2px; .cf-title {line-height: 24px; font-weight: 500;} .cf-label-optional {font-weight: 400; color: var(--confetti-text-subtle-color);} .cf-description {font-size: .875em; line-height: 20px; font-weight: 400; color: var(--confetti-text-subtle-color);}} .cf-others-choice {display: flex; flex-direction: column; gap: 8px;}} .cf-rating-section {display: flex; flex-direction: column; gap: 4px;} .cf-rating-tiff {overflow: hidden; border-radius: 100%;} .cf-rating-tiff,.cf-rating-emoji {opacity: .5;} .cf-rating-display-tiff,.cf-rating-display-star,.cf-rating-display-emoji {display: grid; grid-template-columns: repeat(auto-fit,40px); justify-content: space-between; gap: 8px; .cf-rating-tiff,.cf-rating-emoji,.cf-rating-star {font-size: 1em; background-color: transparent; border: none; padding: 0; transition: transform .15s ease-out; color: var(--confetti-rating-active-bg-color); &[data-focus-visible="true"] {outline: 2px solid var(--confetti-outline-color); outline-offset: 2px;} &:hover {cursor: pointer; transform: scale(1.15); opacity: 1 !important;} &[data-filled="true"] {opacity: 1;} &[data-selected="true"] {opacity: 1;} & svg {transition: fill .15s ease-out;}}} .cf-rating-text {display: flex; justify-content: space-between; font-size: .75em; color: var(--confetti-text-subtle-color); font-weight: 500; line-height: 1; .cf-rating-text-lower {flex: 1; text-align: start;} .cf-rating-text-upper {flex: 1; text-align: end;}} .cf-rating-display-star {.cf-rating-star[data-selected="true"] ~ .cf-rating-star {opacity: .5;}} .cf-rating-display-number {display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; border: 1px solid var(--confetti-border-color); border-radius: 8px; overflow: hidden; .cf-rating-number {border-right: 1px solid var(--confetti-border-color); text-align: center; cursor: pointer; color: var(--confetti-rating-text-color); border-left: none; border-top: none; border-bottom: none; font-weight: 700; padding: 8px 0; margin-top: -1px; margin-bottom: -1px; &:first-of-type {border-top-left-radius: 8px; border-bottom-left-radius: 8px;} &:last-of-type {border-top-right-radius: 8px; border-bottom-right-radius: 8px; border-right: 0;} &[data-focus-visible="true"] {box-shadow: inset 0 0 0 1px var(--confetti-outline-color);} &[data-selected="true"] {background: var(--confetti-rating-active-bg-color); color: var(--confetti-rating-active-text-color);}}}}