From 095355d33aa7136d779b6a8a39678d562c6501c6 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Tue, 9 May 2023 15:57:33 -0700
Subject: [PATCH] chore(chips): split out trailing icon styles

PiperOrigin-RevId: 530736697
---
 chips/filter-chip.ts                |  4 ++-
 chips/lib/_filter-chip.scss         | 37 -------------------------
 chips/lib/_trailing-icon.scss       | 43 +++++++++++++++++++++++++++++
 chips/lib/trailing-icon-styles.scss | 10 +++++++
 4 files changed, 56 insertions(+), 38 deletions(-)
 create mode 100644 chips/lib/_trailing-icon.scss
 create mode 100644 chips/lib/trailing-icon-styles.scss

diff --git a/chips/filter-chip.ts b/chips/filter-chip.ts
index 3d1bb6ee84..cd7add2ff7 100644
--- a/chips/filter-chip.ts
+++ b/chips/filter-chip.ts
@@ -10,6 +10,7 @@ import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {FilterChip} from './lib/filter-chip.js';
 import {styles} from './lib/filter-styles.css.js';
 import {styles as sharedStyles} from './lib/shared-styles.css.js';
+import {styles as trailingIconStyles} from './lib/trailing-icon-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,5 +26,6 @@ declare global {
  */
 @customElement('md-filter-chip')
 export class MdFilterChip extends FilterChip {
-  static override styles = [sharedStyles, elevatedStyles, styles];
+  static override styles =
+      [sharedStyles, elevatedStyles, trailingIconStyles, styles];
 }
diff --git a/chips/lib/_filter-chip.scss b/chips/lib/_filter-chip.scss
index ccc79377d9..345ea1f7b8 100644
--- a/chips/lib/_filter-chip.scss
+++ b/chips/lib/_filter-chip.scss
@@ -135,41 +135,4 @@
   .selected:active .icon {
     color: var(--_selected-pressed-leading-icon-color);
   }
-
-  .icon.trailing {
-    color: var(--_trailing-icon-color);
-  }
-
-  :hover .icon.trailing {
-    color: var(--_hover-trailing-icon-color);
-  }
-
-  :focus .icon.trailing {
-    color: var(--_focus-trailing-icon-color);
-  }
-
-  :active .icon.trailing {
-    color: var(--_pressed-trailing-icon-color);
-  }
-
-  .disabled .icon.trailing {
-    color: var(--_disabled-trailing-icon-color);
-    opacity: var(--_disabled-trailing-icon-opacity);
-  }
-
-  .selected .icon.trailing {
-    color: var(--_selected-trailing-icon-color);
-  }
-
-  .selected:hover .icon.trailing {
-    color: var(--_selected-hover-trailing-icon-color);
-  }
-
-  .selected:focus .icon.trailing {
-    color: var(--_selected-focus-trailing-icon-color);
-  }
-
-  .selected:active .icon.trailing {
-    color: var(--_selected-pressed-trailing-icon-color);
-  }
 }
diff --git a/chips/lib/_trailing-icon.scss b/chips/lib/_trailing-icon.scss
new file mode 100644
index 0000000000..5a5ac8d9ea
--- /dev/null
+++ b/chips/lib/_trailing-icon.scss
@@ -0,0 +1,43 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@mixin styles() {
+  .trailing .icon {
+    color: var(--_trailing-icon-color);
+  }
+
+  :hover .trailing .icon {
+    color: var(--_hover-trailing-icon-color);
+  }
+
+  :focus .trailing .icon {
+    color: var(--_focus-trailing-icon-color);
+  }
+
+  :active .trailing .icon {
+    color: var(--_pressed-trailing-icon-color);
+  }
+
+  .disabled .trailing .icon {
+    color: var(--_disabled-trailing-icon-color);
+    opacity: var(--_disabled-trailing-icon-opacity);
+  }
+
+  .selected .trailing .icon {
+    color: var(--_selected-trailing-icon-color);
+  }
+
+  .selected:hover .trailing .icon {
+    color: var(--_selected-hover-trailing-icon-color);
+  }
+
+  .selected:focus .trailing .icon {
+    color: var(--_selected-focus-trailing-icon-color);
+  }
+
+  .selected:active .trailing .icon {
+    color: var(--_selected-pressed-trailing-icon-color);
+  }
+}
diff --git a/chips/lib/trailing-icon-styles.scss b/chips/lib/trailing-icon-styles.scss
new file mode 100644
index 0000000000..00dbabfe9c
--- /dev/null
+++ b/chips/lib/trailing-icon-styles.scss
@@ -0,0 +1,10 @@
+//
+// Copyright 2023 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+// go/keep-sorted start
+@use './trailing-icon';
+// go/keep-sorted end
+
+@include trailing-icon.styles;