2022-07-21 13:47:00 -07:00
|
|
|
//
|
|
|
|
|
// Copyright 2021 Google LLC
|
|
|
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
|
//
|
|
|
|
|
|
2022-10-19 11:37:19 -07:00
|
|
|
@mixin styles() {
|
2022-07-21 13:47:00 -07:00
|
|
|
// The icon CSS class overrides styles defined in the .material-icons CSS
|
|
|
|
|
// class, which is loaded separately so the order of CSS definitions is not
|
|
|
|
|
// guaranteed. Therefore, increase specifity to ensure overrides apply.
|
2023-01-09 17:14:36 -08:00
|
|
|
::slotted([slot='icon']) {
|
2023-11-06 15:38:14 -08:00
|
|
|
display: inline-flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
writing-mode: horizontal-tb;
|
|
|
|
|
fill: currentColor;
|
2023-11-10 15:16:30 -08:00
|
|
|
flex-shrink: 0;
|
2023-11-06 15:38:14 -08:00
|
|
|
color: var(--_icon-color);
|
|
|
|
|
font-size: var(--_icon-size);
|
|
|
|
|
inline-size: var(--_icon-size);
|
|
|
|
|
block-size: var(--_icon-size);
|
|
|
|
|
}
|
2022-10-19 11:37:19 -07:00
|
|
|
|
2023-11-06 15:38:14 -08:00
|
|
|
:host(:hover) ::slotted([slot='icon']) {
|
|
|
|
|
color: var(--_hover-icon-color);
|
|
|
|
|
}
|
2022-10-19 11:37:19 -07:00
|
|
|
|
2023-11-06 15:38:14 -08:00
|
|
|
:host(:focus-within) ::slotted([slot='icon']) {
|
|
|
|
|
color: var(--_focus-icon-color);
|
|
|
|
|
}
|
2022-07-21 13:47:00 -07:00
|
|
|
|
2023-11-06 15:38:14 -08:00
|
|
|
:host(:active) ::slotted([slot='icon']) {
|
|
|
|
|
color: var(--_pressed-icon-color);
|
|
|
|
|
}
|
2022-07-21 13:47:00 -07:00
|
|
|
|
2024-07-12 12:30:37 -07:00
|
|
|
:host(:is([disabled], [soft-disabled])) ::slotted([slot='icon']) {
|
2023-11-06 15:38:14 -08:00
|
|
|
color: var(--_disabled-icon-color);
|
|
|
|
|
opacity: var(--_disabled-icon-opacity);
|
2022-07-21 13:47:00 -07:00
|
|
|
}
|
|
|
|
|
}
|
