From ff658c86ff1ce45153177900eedb124db21f8c23 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 26 Feb 2018 11:43:58 -0800
Subject: [PATCH] Fix deprecated CSS (#928)

* Fix nested var

* Fix deprecated @apply syntax

* Hassio
---
 hassio/addon-view/hassio-addon-config.html           |  4 ++--
 hassio/addon-view/hassio-addon-network.html          |  6 +++---
 .../cloud/ha-config-cloud-forgot-password.html       |  2 +-
 panels/config/cloud/ha-config-cloud-login.html       |  2 +-
 panels/config/cloud/ha-config-cloud-register.html    |  2 +-
 panels/config/core/ha-config-section-core.html       |  4 ++--
 panels/config/core/ha-form-group.html                | 10 +++++-----
 panels/config/customize/types/ha-customize-icon.html |  2 +-
 .../customize/types/ha-customize-key-value.html      |  4 ++--
 panels/config/ha-config-section.html                 |  6 +++---
 panels/config/ha-entity-config.html                  | 10 +++++-----
 panels/config/ha-form-style.html                     | 12 ++++++------
 panels/config/zwave/ha-config-zwave.html             |  4 ++--
 panels/config/zwave/zwave-groups.html                |  4 ++--
 panels/config/zwave/zwave-node-config.html           |  4 ++--
 panels/config/zwave/zwave-usercodes.html             |  4 ++--
 panels/config/zwave/zwave-values.html                |  4 ++--
 panels/logbook/ha-logbook.html                       |  2 +-
 panels/map/ha-entity-marker.html                     |  2 +-
 src/cards/ha-camera-card.html                        |  2 +-
 src/cards/ha-entities-card.html                      |  4 ++--
 src/cards/ha-history_graph-card.html                 |  4 ++--
 src/cards/ha-media_player-card.html                  |  6 +++---
 src/cards/ha-persistent_notification-card.html       |  2 +-
 src/components/buttons/ha-progress-button.html       |  4 ++--
 src/components/entity/ha-state-label-badge.html      |  2 +-
 src/components/entity/state-info.html                |  6 +++---
 src/components/ha-card.html                          |  4 ++--
 src/components/ha-climate-control.html               |  8 ++++----
 src/components/ha-label-badge.html                   |  4 ++--
 src/components/ha-sidebar.html                       |  8 ++++----
 src/more-infos/more-info-vacuum.html                 |  2 +-
 src/resources/ha-style.html                          |  4 ++--
 src/state-summary/state-card-climate.html            |  2 +-
 src/state-summary/state-card-display.html            |  2 +-
 src/state-summary/state-card-input_number.html       |  2 +-
 src/state-summary/state-card-media_player.html       |  8 ++++----
 src/state-summary/state-card-timer.html              |  2 +-
 src/state-summary/state-card-weblink.html            |  4 ++--
 39 files changed, 84 insertions(+), 84 deletions(-)

diff --git a/hassio/addon-view/hassio-addon-config.html b/hassio/addon-view/hassio-addon-config.html
index 50dec55143..a168ae48a6 100644
--- a/hassio/addon-view/hassio-addon-config.html
+++ b/hassio/addon-view/hassio-addon-config.html
@@ -15,8 +15,8 @@
         display: block;
       }
       .card-actions {
-        @apply(--layout);
-        @apply(--layout-justified);
+        @apply --layout;
+        @apply --layout-justified;
       }
       .errors {
         color: var(--google-red-500);
diff --git a/hassio/addon-view/hassio-addon-network.html b/hassio/addon-view/hassio-addon-network.html
index 2d45f54e94..43afede6a4 100644
--- a/hassio/addon-view/hassio-addon-network.html
+++ b/hassio/addon-view/hassio-addon-network.html
@@ -21,8 +21,8 @@
         margin-bottom: 16px;
       }
       .card-actions {
-        @apply(--layout);
-        @apply(--layout-justified);
+        @apply --layout;
+        @apply --layout-justified;
       }
     </style>
     <paper-card heading='Network'>
@@ -54,7 +54,7 @@
           </template>
         </table>
       </div>
-      <div class="card-actions">        
+      <div class="card-actions">
         <ha-call-api-button
           class='warning'
           hass='[[hass]]'
diff --git a/panels/config/cloud/ha-config-cloud-forgot-password.html b/panels/config/cloud/ha-config-cloud-forgot-password.html
index 0bd864197c..86d4de1e62 100644
--- a/panels/config/cloud/ha-config-cloud-forgot-password.html
+++ b/panels/config/cloud/ha-config-cloud-forgot-password.html
@@ -22,7 +22,7 @@
         margin-top: 24px;
       }
       h1 {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         margin: 0;
       }
       .error {
diff --git a/panels/config/cloud/ha-config-cloud-login.html b/panels/config/cloud/ha-config-cloud-login.html
index 9491dbc623..67e6904d55 100644
--- a/panels/config/cloud/ha-config-cloud-login.html
+++ b/panels/config/cloud/ha-config-cloud-login.html
@@ -27,7 +27,7 @@
         margin-top: 24px;
       }
       h1 {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         margin: 0;
       }
       .error {
diff --git a/panels/config/cloud/ha-config-cloud-register.html b/panels/config/cloud/ha-config-cloud-register.html
index 445d34b8db..06af4c305f 100644
--- a/panels/config/cloud/ha-config-cloud-register.html
+++ b/panels/config/cloud/ha-config-cloud-register.html
@@ -24,7 +24,7 @@
         margin-top: 24px;
       }
       h1 {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         margin: 0;
       }
       .error {
diff --git a/panels/config/core/ha-config-section-core.html b/panels/config/core/ha-config-section-core.html
index b7755d45c3..f41dfc59d8 100644
--- a/panels/config/core/ha-config-section-core.html
+++ b/panels/config/core/ha-config-section-core.html
@@ -14,8 +14,8 @@
   <template>
     <style include="iron-flex ha-style">
       .validate-container {
-        @apply(--layout-vertical);
-        @apply(--layout-center-center);
+        @apply --layout-vertical;
+        @apply --layout-center-center;
         height: 140px;
       }
 
diff --git a/panels/config/core/ha-form-group.html b/panels/config/core/ha-form-group.html
index 45fd45cec6..ac89350a7a 100644
--- a/panels/config/core/ha-form-group.html
+++ b/panels/config/core/ha-form-group.html
@@ -14,9 +14,9 @@
   <template>
     <style include="iron-flex ha-style ha-form-style">
       .entities-header {
-        @apply(--layout-horizontal);
-        @apply(--layout-justified);
-        @apply(--layout-center);
+        @apply --layout-horizontal;
+        @apply --layout-justified;
+        @apply --layout-center;
         width: 100%;
       }
 
@@ -37,8 +37,8 @@
       }
 
       .entity-row {
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
+        @apply --layout-horizontal;
+        @apply --layout-center;
         padding: 4px 0;
         border-top: 1px solid rgba(0, 0, 0, .12);
       }
diff --git a/panels/config/customize/types/ha-customize-icon.html b/panels/config/customize/types/ha-customize-icon.html
index b5b397bbc7..013bdf772e 100644
--- a/panels/config/customize/types/ha-customize-icon.html
+++ b/panels/config/customize/types/ha-customize-icon.html
@@ -6,7 +6,7 @@
   <template>
     <style>
       :host {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
       }
       .icon-image {
         border: 1px solid grey;
diff --git a/panels/config/customize/types/ha-customize-key-value.html b/panels/config/customize/types/ha-customize-key-value.html
index 6486bf87fb..a9d17e9496 100644
--- a/panels/config/customize/types/ha-customize-key-value.html
+++ b/panels/config/customize/types/ha-customize-key-value.html
@@ -5,10 +5,10 @@
   <template>
     <style>
       :host {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
       }
       paper-input {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
       .key {
         padding-right: 20px;
diff --git a/panels/config/ha-config-section.html b/panels/config/ha-config-section.html
index db7798118e..cdccd7dfc2 100644
--- a/panels/config/ha-config-section.html
+++ b/panels/config/ha-config-section.html
@@ -11,7 +11,7 @@
       }
 
       .header {
-        @apply(--paper-font-display1);
+        @apply --paper-font-display1;
         opacity: var(--dark-primary-opacity);
       }
 
@@ -20,7 +20,7 @@
       }
 
       .intro {
-        @apply(--paper-font-subhead);
+        @apply --paper-font-subhead;
         width: 100%;
         max-width: 400px;
         margin-right: 40px;
@@ -43,7 +43,7 @@
         margin-top: 20px;
       }
       .narrow .header {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
       }
       .narrow .intro {
         font-size: 14px;
diff --git a/panels/config/ha-entity-config.html b/panels/config/ha-entity-config.html
index 5c3127f4af..da960cfe97 100644
--- a/panels/config/ha-entity-config.html
+++ b/panels/config/ha-entity-config.html
@@ -7,13 +7,13 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
+        @apply --layout-horizontal;
         padding-bottom: 24px;
       }
 
       .form-placeholder {
-        @apply(--layout-vertical);
-        @apply(--layout-center-center);
+        @apply --layout-vertical;
+        @apply --layout-center-center;
         height: 96px;
       }
 
@@ -22,8 +22,8 @@
       }
 
       .card-actions {
-        @apply(--layout-horizontal);
-        @apply(--layout-justified);
+        @apply --layout-horizontal;
+        @apply --layout-justified;
       }
     </style>
     <paper-card>
diff --git a/panels/config/ha-form-style.html b/panels/config/ha-form-style.html
index db104ca8f1..53b941a25b 100644
--- a/panels/config/ha-form-style.html
+++ b/panels/config/ha-form-style.html
@@ -2,22 +2,22 @@
   <template>
     <style>
       .form-group {
-        @apply(--layout-horizontal);
-        @apply(--layout-center);
+        @apply --layout-horizontal;
+        @apply --layout-center;
         padding: 8px 16px;
       }
 
       .form-group label {
-        @apply(--layout-flex-2);
+        @apply --layout-flex-2;
       }
 
       .form-group .form-control {
-        @apply(--layout-flex);
+        @apply --layout-flex;
       }
 
       .form-group.vertical {
-        @apply(--layout-vertical);
-        @apply(--layout-start);
+        @apply --layout-vertical;
+        @apply --layout-start;
       }
 
       paper-dropdown-menu.form-control {
diff --git a/panels/config/zwave/ha-config-zwave.html b/panels/config/zwave/ha-config-zwave.html
index 64a8949794..d1240ca603 100644
--- a/panels/config/zwave/ha-config-zwave.html
+++ b/panels/config/zwave/ha-config-zwave.html
@@ -49,8 +49,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;
diff --git a/panels/config/zwave/zwave-groups.html b/panels/config/zwave/zwave-groups.html
index 351ac8f4d4..691a734ee7 100644
--- a/panels/config/zwave/zwave-groups.html
+++ b/panels/config/zwave/zwave-groups.html
@@ -20,8 +20,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;
diff --git a/panels/config/zwave/zwave-node-config.html b/panels/config/zwave/zwave-node-config.html
index f76d0dadb9..385072fafb 100644
--- a/panels/config/zwave/zwave-node-config.html
+++ b/panels/config/zwave/zwave-node-config.html
@@ -21,8 +21,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;
diff --git a/panels/config/zwave/zwave-usercodes.html b/panels/config/zwave/zwave-usercodes.html
index 9b4ce741db..e663afbb86 100644
--- a/panels/config/zwave/zwave-usercodes.html
+++ b/panels/config/zwave/zwave-usercodes.html
@@ -21,8 +21,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;
diff --git a/panels/config/zwave/zwave-values.html b/panels/config/zwave/zwave-values.html
index 2855305419..1c579f02b2 100644
--- a/panels/config/zwave/zwave-values.html
+++ b/panels/config/zwave/zwave-values.html
@@ -20,8 +20,8 @@
       }
 
       .device-picker {
-        @apply(--layout-horizontal);
-        @apply(--layout-center-center);
+        @apply --layout-horizontal;
+        @apply --layout-center-center;
         padding-left: 24px;
         padding-right: 24px;
         padding-bottom: 24px;
diff --git a/panels/logbook/ha-logbook.html b/panels/logbook/ha-logbook.html
index d86f60b6f8..954d9efd5e 100644
--- a/panels/logbook/ha-logbook.html
+++ b/panels/logbook/ha-logbook.html
@@ -14,7 +14,7 @@
       }
 
       .entry {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         line-height: 2em;
       }
 
diff --git a/panels/map/ha-entity-marker.html b/panels/map/ha-entity-marker.html
index 03c12f8abb..ee3fb3df8d 100644
--- a/panels/map/ha-entity-marker.html
+++ b/panels/map/ha-entity-marker.html
@@ -19,7 +19,7 @@
       line-height: 2.5em;
       font-size: 1.5em;
       border-radius: 50%;
-      border: 0.1em solid var(--ha-marker-color, --default-primary-color);
+      border: 0.1em solid var(--ha-marker-color, var(--default-primary-color));
       color: rgb(76, 76, 76);
       background-color: white;
     }
diff --git a/src/cards/ha-camera-card.html b/src/cards/ha-camera-card.html
index c07db634ac..0db3ea9e0a 100644
--- a/src/cards/ha-camera-card.html
+++ b/src/cards/ha-camera-card.html
@@ -21,7 +21,7 @@
         border-radius: 2px;
       }
       .caption {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
         position: absolute;
         left: 0px;
         right: 0px;
diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index 019f5f685e..1d9328d98a 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -18,7 +18,7 @@
         padding: 4px 0;
       }
       .header {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         /* overwriting line-height +8 because entity-toggle can be 40px height,
            compensating this with reduced padding */
         line-height: 40px;
@@ -26,7 +26,7 @@
         padding: 4px 0 12px;
       }
       .header .name {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
       }
       ha-entity-toggle {
         margin-left: 16px;
diff --git a/src/cards/ha-history_graph-card.html b/src/cards/ha-history_graph-card.html
index 5b8760018f..8a3cd11e28 100644
--- a/src/cards/ha-history_graph-card.html
+++ b/src/cards/ha-history_graph-card.html
@@ -15,11 +15,11 @@
         width: 100%;
       }
       .header {
-        @apply(--paper-font-headline);
+        @apply --paper-font-headline;
         line-height: 40px;
         color: var(--primary-text-color);
         padding: 20px 16px 12px;
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
       }
       paper-card[dialog] .header {
         padding-top: 0;
diff --git a/src/cards/ha-media_player-card.html b/src/cards/ha-media_player-card.html
index 8bda8e3645..7f74c5c2e6 100644
--- a/src/cards/ha-media_player-card.html
+++ b/src/cards/ha-media_player-card.html
@@ -73,7 +73,7 @@
       }
 
       .banner > .caption {
-        @apply(--paper-font-caption);
+        @apply --paper-font-caption;
 
         position: absolute;
         left: 0;
@@ -96,7 +96,7 @@
       }
 
       .banner > .caption .title {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
         font-size: 1.2em;
         margin: 8px 0 4px;
       }
@@ -109,7 +109,7 @@
 
       .controls {
         position: relative;
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         padding: 8px;
         border-bottom-left-radius: 2px;
         border-bottom-right-radius: 2px;
diff --git a/src/cards/ha-persistent_notification-card.html b/src/cards/ha-persistent_notification-card.html
index 0b78d85488..958f4340d8 100644
--- a/src/cards/ha-persistent_notification-card.html
+++ b/src/cards/ha-persistent_notification-card.html
@@ -10,7 +10,7 @@
   <template>
     <style>
       :host {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
       }
       ha-markdown {
         display: block;
diff --git a/src/components/buttons/ha-progress-button.html b/src/components/buttons/ha-progress-button.html
index 7d370bdbb3..0591f2e02a 100644
--- a/src/components/buttons/ha-progress-button.html
+++ b/src/components/buttons/ha-progress-button.html
@@ -31,8 +31,8 @@
       }
 
       .progress {
-        @apply(--layout);
-        @apply(--layout-center-center);
+        @apply --layout;
+        @apply --layout-center-center;
         position: absolute;
         top: 0;
         left: 0;
diff --git a/src/components/entity/ha-state-label-badge.html b/src/components/entity/ha-state-label-badge.html
index 7559d32e3d..10ddb845f0 100644
--- a/src/components/entity/ha-state-label-badge.html
+++ b/src/components/entity/ha-state-label-badge.html
@@ -32,7 +32,7 @@
       }
 
       .grey {
-        --ha-label-badge-color: var(--label-badge-grey, --paper-grey-500);
+        --ha-label-badge-color: var(--label-badge-grey, var(--paper-grey-500));
       }
     </style>
 
diff --git a/src/components/entity/state-info.html b/src/components/entity/state-info.html
index 2fb33399d4..bfb01b22f7 100644
--- a/src/components/entity/state-info.html
+++ b/src/components/entity/state-info.html
@@ -8,7 +8,7 @@
   <template>
     <style>
     :host {
-      @apply(--paper-font-body1);
+      @apply --paper-font-body1;
       min-width: 150px;
       white-space: nowrap;
     }
@@ -22,7 +22,7 @@
     }
 
     .name {
-      @apply(--paper-font-common-nowrap);
+      @apply --paper-font-common-nowrap;
       color: var(--primary-text-color);
       line-height: 40px;
     }
@@ -32,7 +32,7 @@
     }
 
     .time-ago, ::slotted(*) {
-      @apply(--paper-font-common-nowrap);
+      @apply --paper-font-common-nowrap;
       color: var(--secondary-text-color);
     }
     </style>
diff --git a/src/components/ha-card.html b/src/components/ha-card.html
index 747389f8e4..2d59ed3923 100644
--- a/src/components/ha-card.html
+++ b/src/components/ha-card.html
@@ -12,8 +12,8 @@
         background-color: var(--paper-card-background-color, white);
       }
       .header {
-        @apply(--paper-font-headline);
-        @apply(--paper-font-common-expensive-kerning);
+        @apply --paper-font-headline;
+        @apply --paper-font-common-expensive-kerning;
         opacity: var(--dark-primary-opacity);
         padding: 24px 16px 16px;
         text-transform: capitalize;
diff --git a/src/components/ha-climate-control.html b/src/components/ha-climate-control.html
index 09db77dba9..7ce1dcb9ca 100644
--- a/src/components/ha-climate-control.html
+++ b/src/components/ha-climate-control.html
@@ -10,15 +10,15 @@
     <style>
       /* local DOM styles go here */
       :host {
-        @apply(--layout-flex);
-        @apply(--layout-horizontal);
-        @apply(--layout-justified);
+        @apply --layout-flex;
+        @apply --layout-horizontal;
+        @apply --layout-justified;
       }
       .in-flux#target_temperature {
         color: var(--google-red-500);
       }
       #target_temperature {
-        @apply(--layout-self-center);
+        @apply --layout-self-center;
         font-size: 200%;
       }
       .control-buttons {
diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html
index 7323a8180e..7aa943dcc5 100644
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@@ -19,7 +19,7 @@
       line-height: var(--ha-label-badge-size, 2.5em);
       font-size: var(--ha-label-badge-font-size, 1.5em);
       border-radius: 50%;
-      border: 0.1em solid var(--ha-label-badge-color, --primary-color);
+      border: 0.1em solid var(--ha-label-badge-color, var(--primary-color));
       color: var(--label-badge-text-color, rgb(76, 76, 76));
 
       white-space: nowrap;
@@ -47,7 +47,7 @@
     .label-badge .label span {
       max-width: 68%; /* Parent width minus two times 16% padding */
       display: inline-block;
-      background-color: var(--ha-label-badge-color, --primary-color);
+      background-color: var(--ha-label-badge-color, var(--primary-color));
       color: white;
       border-radius: 1em;
       padding: 8% 16%;
diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index 8d98a2e42b..1070918bbb 100644
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@@ -26,7 +26,7 @@
         -webkit-user-select: none;
         -moz-user-select: none;
         border-right: 1px solid var(--divider-color);
-        background: var(--paper-listbox-background-color,var(--primary-background-color));
+        background: var(--paper-listbox-background-color, var(--primary-background-color));
       }
 
       app-toolbar {
@@ -64,7 +64,7 @@
       }
 
       paper-icon-item .item-text {
-        @apply(--sidebar-text);
+        @apply --sidebar-text;
       }
       paper-icon-item.iron-selected .item-text {
         opacity: 1;
@@ -82,11 +82,11 @@
       }
 
       .setting {
-        @apply(--sidebar-text);
+        @apply --sidebar-text;
       }
 
       .subheader {
-        @apply(--sidebar-text);
+        @apply --sidebar-text;
         padding: 16px;
       }
 
diff --git a/src/more-infos/more-info-vacuum.html b/src/more-infos/more-info-vacuum.html
index 74279f3e33..58e8e52557 100644
--- a/src/more-infos/more-info-vacuum.html
+++ b/src/more-infos/more-info-vacuum.html
@@ -16,7 +16,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       :host {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         line-height: 1.5;
       }
 
diff --git a/src/resources/ha-style.html b/src/resources/ha-style.html
index 3353c706bc..42d6da4f94 100644
--- a/src/resources/ha-style.html
+++ b/src/resources/ha-style.html
@@ -82,7 +82,7 @@
   <template>
     <style>
       :host {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
       }
 
       app-header-layout, ha-app-layout {
@@ -101,7 +101,7 @@
       }
 
       h1 {
-        @apply(--paper-font-title);
+        @apply --paper-font-title;
       }
 
       button.link {
diff --git a/src/state-summary/state-card-climate.html b/src/state-summary/state-card-climate.html
index 252257fff8..c4728e33f8 100644
--- a/src/state-summary/state-card-climate.html
+++ b/src/state-summary/state-card-climate.html
@@ -10,7 +10,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       :host {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         line-height: 1.5;
       }
 
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 718e112892..4ab15fe771 100644
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -11,7 +11,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       .state {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         color: var(--primary-text-color);
 
         margin-left: 16px;
diff --git a/src/state-summary/state-card-input_number.html b/src/state-summary/state-card-input_number.html
index a66c2d54e8..1468433d0b 100644
--- a/src/state-summary/state-card-input_number.html
+++ b/src/state-summary/state-card-input_number.html
@@ -20,7 +20,7 @@
         margin-left: auto;
       }
       .state {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         color: var(--primary-text-color);
 
         text-align: right;
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index bba35a79ea..20b876ad2b 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -13,14 +13,14 @@
       }
 
       .state {
-        @apply(--paper-font-common-nowrap);
-        @apply(--paper-font-body1);
+        @apply --paper-font-common-nowrap;
+        @apply --paper-font-body1;
         margin-left: 16px;
         text-align: right;
       }
 
       .main-text {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
         color: var(--primary-text-color);
         text-transform: capitalize;
       }
@@ -30,7 +30,7 @@
       }
 
       .secondary-text {
-        @apply(--paper-font-common-nowrap);
+        @apply --paper-font-common-nowrap;
         color: var(--secondary-text-color);
       }
     </style>
diff --git a/src/state-summary/state-card-timer.html b/src/state-summary/state-card-timer.html
index 9b9adbaf79..c3f09994a1 100644
--- a/src/state-summary/state-card-timer.html
+++ b/src/state-summary/state-card-timer.html
@@ -11,7 +11,7 @@
     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     <style>
       .state {
-        @apply(--paper-font-body1);
+        @apply --paper-font-body1;
         color: var(--primary-text-color);
 
         margin-left: 16px;
diff --git a/src/state-summary/state-card-weblink.html b/src/state-summary/state-card-weblink.html
index 484cbcfc02..64cd3ab107 100644
--- a/src/state-summary/state-card-weblink.html
+++ b/src/state-summary/state-card-weblink.html
@@ -9,8 +9,8 @@
         display: block;
       }
       .name {
-        @apply(--paper-font-common-nowrap);
-        @apply(--paper-font-body1);
+        @apply --paper-font-common-nowrap;
+        @apply --paper-font-body1;
         color: var(--primary-color);
 
         text-transform: capitalize;