[data-rewards-pane] { --section-color: var(--orange); display: grid; gap: 0.5rem; min-width: 0; [data-reward-total] { display: grid; gap: 0.125rem; justify-items: start; min-width: 0; color: var(--gray); font-size: var(--font-size-xs); line-height: var(--line-height-xs); text-align: left; strong { min-width: 0; overflow-wrap: anywhere; color: var(--white); font-size: var(--font-size-sm); font-weight: var(--font-weight-strong); line-height: var(--line-height-sm); } > span:first-child { color: var(--section-color); text-transform: uppercase; } } [data-reward-bar] { display: flex; gap: 0.125rem; height: 0.5rem; min-width: 0; } [data-reward-segment] { width: var(--share); border-radius: 0.125rem; transition: opacity var(--transition-duration) ease; &[data-reward-segment="subsidy"] { background: var(--orange); } &[data-reward-segment="fees"] { background: var(--green); } &[data-muted] { opacity: 0.25; } } }