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}};
}
my-panel:nth-of-type({{item+1}}) {
background-color: {{ g.theme.colorThree | cycle(item * -1) }};
}
:host {
border-bottom: 8px solid {{g.theme.colorOne}};
color: {{g.theme.colorOne | cycle(100)}};
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)}}
}