Move panel item CSS into component

Moves all the styles used by a panel item from the included
external CSS file into the custom element template.

Bug: 947388
Change-Id: I010f65de130cda1462cfe3714d63af59f916593e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1689394
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675432}
diff --git a/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css b/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css
index e78e099..d24ae42 100644
--- a/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css
+++ b/ui/file_manager/file_manager/foreground/elements/files_xf_elements.css
@@ -13,65 +13,7 @@
     flex-direction: column;
 }
 
-.xf-panel-item {
-    align-items: center;
-    background-color: #FFF;
-    display: flex;
-    flex-direction: row;
-    max-width: 400px;
-}
-
-.xf-button {
-    height: 36px;
-    width: 36px;
-}
-
-.xf-panel-text {
-    font: 13px Roboto;
-    line-height: 20px;
-    max-width: 216px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.xf-panel-label-text {
-    color: rgb(32, 33, 36);
-}
-
-.xf-panel-secondary-text {
-    color: rgb(95, 99, 104);
-}
-
-.xf-padder-4 {
-    width: 4px;
-}
-
-.xf-padder-16 {
-    width: 16px;
-}
-
-.xf-padder-24 {
-    flex-grow: 16;
-    width: 24px;
-}
 
 .xf-vertical-padder-8 {
     height: 8px;
 }
-
-xf-circular-progress {
-    padding: 16px;
-}
-
-xf-activity-complete {
-    padding: 16px;
-}
-
-.xf-success {
-    color: rgb(52, 168, 83);
-}
-
-.xf-failure {
-    color: rgb(234, 67, 53);
-}
diff --git a/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js b/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js
index dbc70bb..8dbecac 100644
--- a/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js
+++ b/ui/file_manager/file_manager/foreground/elements/xf_panel_item.js
@@ -45,14 +45,73 @@
    * @return {string}
    */
   static get template_() {
-    return `<link rel='stylesheet'
-              href='foreground/elements/files_xf_elements.css'>
-            <style>
+    return `<style>
+              .xf-panel-item {
+                  align-items: center;
+                  background-color: #FFF;
+                  display: flex;
+                  flex-direction: row;
+                  max-width: 400px;
+              }
+
+              .xf-button {
+                  height: 36px;
+                  width: 36px;
+              }
+
+              .xf-panel-text {
+                  font: 13px Roboto;
+                  line-height: 20px;
+                  max-width: 216px;
+                  overflow: hidden;
+                  text-overflow: ellipsis;
+                  white-space: nowrap;
+              }
+
+              .xf-panel-label-text {
+                  color: rgb(32, 33, 36);
+              }
+
+              .xf-panel-secondary-text {
+                  color: rgb(95, 99, 104);
+              }
+
+              .xf-padder-4 {
+                  width: 4px;
+              }
+
+              .xf-padder-16 {
+                  width: 16px;
+              }
+
+              .xf-padder-24 {
+                  flex-grow: 16;
+                  width: 24px;
+              }
+
+              xf-circular-progress {
+                  padding: 16px;
+              }
+
+              xf-activity-complete {
+                  padding: 16px;
+              }
+
+              // TODO(crbug.com/947388) Use '--goog' prefixed CSS varables.
+              .xf-success {
+                  color: rgb(52, 168, 83);
+              }
+
+              .xf-failure {
+                  color: rgb(234, 67, 53);
+              }
+
               :host([panel-type='0']) .xf-panel-item {
                 height: var(--progress-height);
                 padding-top: var(--progress-padding-top);
                 padding-bottom: var(--progress-padding-bottom);
               }
+
               :not(:host([panel-type='0'])) .xf-panel-item {
                 height: 68px;
               }