refactor(cc-dark-theme): organize styles in several files

Until now we had a single file for the dark theme styles with ~2500
lines, with several sections which were marked with CSS comments.

This CL separates this file into several ones to improve its
maintainability, using the folder structure suggested by
https://sass-guidelin.es/#architecture.

Fixed: twpowertools:21
Change-Id: I0c1741f58b470085c0a499b32aa64feb43d8ad31
diff --git a/src/ccDarkTheme/components/_canned-responses.scss b/src/ccDarkTheme/components/_canned-responses.scss
new file mode 100644
index 0000000..63996ae
--- /dev/null
+++ b/src/ccDarkTheme/components/_canned-responses.scss
@@ -0,0 +1,31 @@
+ec-canned-responses .filter-label,
+    ec-canned-responses ec-canned-response-row .name {
+  color: var(--TWPT-primary-text)!important;
+}
+
+ec-canned-responses .label-row,
+    ec-canned-responses ec-canned-response-row .snippet,
+    ec-canned-responses ec-canned-response-row .tag .content,
+    ec-canned-responses ec-canned-response-row .TWPT-tag .TWPT-content {
+  color: var(--TWPT-secondary-text)!important;
+}
+
+ec-canned-responses ec-canned-response-row .header.closed:hover,
+    ec-canned-responses ec-canned-response-row .header.closed:focus,
+    ec-canned-responses ec-canned-response-row .header.closed:hover .toolbar,
+    ec-canned-responses ec-canned-response-row .header.closed:focus .toolbar,
+    ec-canned-responses ec-canned-response-row material-expansionpanel:not(.expanded) .main-header:focus-within,
+    ec-canned-responses ec-canned-response-row material-expansionpanel:not(.expanded) .main-header:hover {
+  background-color: var(--TWPT-active-background)!important;
+}
+
+ec-canned-responses .filter-row,
+    ec-canned-responses .label-row,
+    ec-canned-responses ec-canned-response-row material-expansionpanel {
+  border-bottom-color: var(--TWPT-subtle-border)!important;
+}
+
+ec-canned-responses .create-button {
+  background: #0842a0!important;
+  color: #d3e3fd!important;
+}