div.flex{display:flex;&.row{flex-direction:row}&.column{flex-direction:column}&[gap-=xxs]{gap:2px}&[gap-=xs]{gap:4px}&[gap-=sm]{gap:8px}&[gap-=md]{gap:12px}&[gap-=lg]{gap:16px}&[gap-=xl]{gap:24px}&[align-=center]{align-items:center}&[align-=start]{align-items:flex-start}&[align-=end]{align-items:flex-end}&[align-=stretch]{align-items:stretch}&[justify-=center]{justify-content:center}&[justify-=start]{justify-content:flex-start}&[justify-=end]{justify-content:flex-end}&[justify-=stretch]{justify-content:stretch}&[justify-=between]{justify-content:space-between}&[basis-="0"]{flex-basis:0}&[basis-="1"]{flex-basis:1}&[grow-="0"]{flex-grow:0}&[grow-="1"]{flex-grow:1}&[shrink-="0"]{flex-shrink:0}&[shrink-="1"]{flex-shrink:1}&[width-=full]{width:100%}}.icon-button{background:none;border:none;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--primary);border-radius:8px;&:focus{outline:solid 2px var(--primary)}}.text{font-size:16px;font-weight:400;line-height:1.25;letter-spacing:-1%;color:inherit;white-space:pre-wrap;font-family:var(--font-family);&[weight-=normal]{font-weight:400}&[weight-=medium]{font-weight:500}&[weight-=bold]{font-weight:600}&[weight-=bolder]{font-weight:700}&[variant-=display]{font-size:80px;font-weight:700;line-height:1.5}&[variant-=h1]{font-size:32px;line-height:1.1}&[variant-=h2]{font-size:24px;line-height:1.1}&[variant-=body]{font-size:16px}&[variant-=caption]{font-size:14px}&[variant-=small]{font-size:12px}&[variant-=tiny]{font-size:10px}&[ellipsize-=true]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}&[center-=true]{text-align:center}}