1 | @use 'sass:selector';
|
2 | @use '../selector-ext';
|
3 | @use '../shadow-dom';
|
4 |
|
5 | :host,
|
6 | :host(:not(.hidden)[outlined]),
|
7 | :host .my-class,
|
8 | gm-fab {
|
9 | @include shadow-dom.host-aware(selector.append(&, '[lowered]')) {
|
10 | color: blue;
|
11 |
|
12 | @include shadow-dom.host-aware(selector.append(&, ':hover')) {
|
13 | background-color: red;
|
14 | }
|
15 | }
|
16 |
|
17 | @include shadow-dom.host-aware(selector.append(&, ':focus'), &) {
|
18 | border-color: green;
|
19 | }
|
20 | }
|
21 |
|
22 |
|
23 | :host,
|
24 | :host(:not(.hidden)[outlined]),
|
25 | :host .my-class,
|
26 | gm-fab {
|
27 | @include selector-ext.append-strict(&, '[lowered]') {
|
28 | color: blue;
|
29 |
|
30 | @include selector-ext.append-strict(&, ':hover') {
|
31 | background-color: red;
|
32 | }
|
33 | }
|
34 |
|
35 | @at-root {
|
36 | #{selector-ext.append-strict(&, ':focus')},
|
37 | & {
|
38 | border-color: green;
|
39 | }
|
40 | }
|
41 | }
|