section[id^=demo]{margin:0 -24px -24px;width:auto}section[id^=demo]>*{padding:var(--iui-size-s) var(--iui-size-l)}.demo-background{background-color:var(--iui-color-background)}.demo-background-hover{background-color:var(--iui-color-background-hover)}.demo-background-backdrop{background-color:var(--iui-color-background-backdrop)}.demo-background-backdrop-hover{background-color:var(--iui-color-background-backdrop-hover)}.demo-background-transparent-hover{background-color:var(--iui-color-background-transparent-hover)}.demo-background-disabled{background-color:var(--iui-color-background-disabled)}.demo-border-subtle{background-color:var(--iui-color-border-subtle)}.demo-border{background-color:var(--iui-color-border)}.demo-background-informational-muted{background-color:var(--iui-color-background-informational-muted)}.demo-background-accent-muted{background-color:var(--iui-color-background-accent-muted)}.demo-background-positive-muted{background-color:var(--iui-color-background-positive-muted)}.demo-background-warning-muted{background-color:var(--iui-color-background-warning-muted)}.demo-background-negative-muted{background-color:var(--iui-color-background-negative-muted)}.demo-background-informational{background-color:var(--iui-color-background-informational)}.demo-background-accent{background-color:var(--iui-color-background-accent)}.demo-background-positive{background-color:var(--iui-color-background-positive)}.demo-background-warning{background-color:var(--iui-color-background-warning)}.demo-background-negative{background-color:var(--iui-color-background-negative)}.demo-background-informational-hover{background-color:var(--iui-color-background-informational-hover)}.demo-background-accent-hover{background-color:var(--iui-color-background-accent-hover)}.demo-background-positive-hover{background-color:var(--iui-color-background-positive-hover)}.demo-background-warning-hover{background-color:var(--iui-color-background-warning-hover)}.demo-background-negative-hover{background-color:var(--iui-color-background-negative-hover)}.demo-hover-backgrounds{list-style:none;padding:0;display:flex;flex:1}.demo-background-accent,.demo-background-informational,.demo-background-positive,.demo-background-warning,.demo-background-negative{color:var(--iui-color-white)}.demo-background-hover,.demo-background-backdrop-hover,.demo-background-transparent-hover,.demo-background-informational-hover,.demo-background-accent-hover,.demo-background-positive-hover,.demo-background-warning-hover,.demo-background-negative-hover{flex:1;text-align:center}.demo-text-placeholder{color:var(--iui-color-text-placeholder);font-weight:var(--iui-font-weight-light)}.demo-text-informational{color:var(--iui-color-text-informational)}.demo-text-informational:hover{color:var(--iui-color-text-informational-hover)}.demo-text-informational::selection{background-color:hsl(var(--iui-color-informational-hsl) / var(--iui-opacity-5))}.demo-text-positive{color:var(--iui-color-text-positive)}.demo-text-positive:hover{color:var(--iui-color-text-positive-hover)}.demo-text-positive::selection{background-color:hsl(var(--iui-color-positive-hsl) / var(--iui-opacity-5))}.demo-text-warning{color:var(--iui-color-text-warning)}.demo-text-warning:hover{color:var(--iui-color-text-warning-hover)}.demo-text-warning::selection{background-color:hsl(var(--iui-color-warning-hsl) / var(--iui-opacity-5))}.demo-text-negative{color:var(--iui-color-text-negative)}.demo-text-negative:hover{color:var(--iui-color-text-negative-hover)}.demo-text-negative::selection{background-color:hsl(var(--iui-color-negative-hsl) / var(--iui-opacity-5))}.demo-text-disabled{color:var(--iui-color-text-disabled)}.demo-text-disabled-hover{color:var(--iui-color-text-disabled-hover)}.demo-text-informational,.demo-text-positive,.demo-text-warning,.demo-text-negative{cursor:pointer}.demo-icon{color:var(--iui-color-icon)}.demo-icon-muted{color:var(--iui-color-icon-muted)}.demo-icon-informational{color:var(--iui-color-icon-informational)}.demo-icon-positive{color:var(--iui-color-icon-positive)}.demo-icon-warning{color:var(--iui-color-icon-warning)}.demo-icon-negative{color:var(--iui-color-icon-negative)}.demo-icon-disabled{color:var(--iui-color-icon-disabled)}.demo-icon-disabled-hover{color:var(--iui-color-icon-disabled-hover)}[class^=demo-icon]{user-select:none}[class^=demo-icon] svg{width:1rem;height:1rem;display:inline-flex;fill:currentColor}