body { font-family: sans-serif; } section { overflow: auto; } button { border: 1px solid {{g.theme.colorOne | cycle(-50)}}; border-radius: 4px; background-color: {{g.theme.colorOne}}; color: {{g.theme.colorTwo}}; } button:active { border: 1px solid {{g.theme.colorTwo | cycle(50)}}; border-radius: 4px; background-color: {{g.theme.colorTwo}}; color: {{g.theme.colorOne}}; } :host { border-bottom: 8px solid {{g.theme.colorOne}}; color: {{g.theme.colorOne }}; background-color: {{g.theme.colorTwo}}; } :host { box-sizing: border-box; background-color: {{g.theme.colorOne}}; border: 8px solid {{g.theme.colorOne | cycle(50)}}; color: {{g.theme.colorOne | cycle(-100)}}; } :host(:nth-of-type(2n + 1)) { background-color: {{g.theme.colorTwo}}; border: 8px solid {{g.theme.colorTwo | cycle(-50)}}; color: {{g.theme.colorTwo | cycle(100)}} }