.PollOption { display: flex; flex-flow: row nowrap; padding-bottom: 0.5rem; &:last-child { margin-bottom: 0; } .poll-option-text { overflow-wrap: anywhere; } .poll-option-share { position: relative; flex-shrink: 0; width: 1.75rem; margin-top: 0.125rem; margin-inline-end: 0.5rem; font-size: 0.875rem; font-weight: var(--font-weight-medium); text-align: right; &.limit-width { display: inline-flex; justify-content: center; font-size: 0.75rem; } } .poll-option-chosen { position: absolute; right: 0; bottom: -5px; width: 1rem; height: 1rem; border-radius: 0.5rem; font-size: 0.75rem; color: var(--background-color); text-align: center; background: var(--accent-color); &.wrong { background: var(--color-error); } .poll-option-icon { line-height: 1rem; } &.animate { opacity: 0; animation-name: PollOptionIconAnimate; animation-duration: 0.3s; animation-fill-mode: forwards; animation-delay: 0.09s; } } .poll-option-right { flex-grow: 1; line-height: 1.3125rem; } .poll-option-answer { position: relative; } .poll-option-line { position: relative; transform-origin: 0 0; width: 0; min-width: 0.5rem; height: 0.25rem; margin-top: 0.5rem; border-radius: 0.125rem; background: var(--accent-color); transition: transform 0.3s; transition-delay: 0.09s; } .poll-line { position: absolute; bottom: -5px; left: -27px; width: 30px; height: 35px; stroke-dasharray: 0, 200%; stroke-dashoffset: 0; transition: stroke-dashoffset 0.3s, stroke-dasharray 0.3s; } .poll-line path { fill: none; stroke: var(--accent-color); stroke-linecap: round; stroke-width: 4px; } .wrong { .poll-option-line { background: var(--color-error); } .poll-line path { stroke: var(--color-error); } } } @keyframes PollOptionIconAnimate { 0% { opacity: 0; } 100% { opacity: 1; } }