Untitled

icon_osram-plug:
  styles:
    custom_fields:
      icon:
        - width: 89%
        - margin-top: -8%
        - margin-left: 4%
  custom_fields:
    icon: >
      [[[
        const style = `
          <style>
            .on {
              animation: on 1s;
              transform-origin: -100% 46%;
              animation-fill-mode: forwards;
            }
            .off {
              animation: off 1s;
              transform-origin: -100% 46%;
              animation-fill-mode: forwards;
            }
          </style>
        `;       
        const path = `
          <rect x="9" y="9" width="31" height="31" rx="2.95238" fill="#7A7D7D"/>
          <path d="M14.6365 24.1476C14.6365 19.3567 17.1024 16.0453 18.1592 16.0453H30.4887C31.5456 16.0453 34.3637 18.5112 34.3637 24.1476C34.3637 29.7839 31.8978 32.6021 30.4887 32.6021H18.1592C17.1024 32.6021 14.6365 30.1362 14.6365 24.1476Z" fill="#9DA0A2"/>
          <circle cx="21.6817" cy="24.5" r="1.40909" fill="#7A7D7D"/>
          <circle cx="28.0226" cy="24.5" r="1.40909" fill="#7A7D7D"/>
        `;
        if (variables.state === 'on' && variables.timeout < 2000) {
          return `
            <svg viewBox="0 0 50 50"> ${style}
              <rect x="9" y="9" width="31" height="31" rx="2.95238" fill="#AEA06D"/>
              <path d="M14.6365 24.1477C14.6365 19.3568 17.1024 16.0454 18.1592 16.0454H30.4887C31.5456 16.0454 34.3637 18.5113 34.3637 24.1477C34.3637 29.784 31.8978 32.6022 30.4887 32.6022H18.1592C17.1024 32.6022 14.6365 30.1363 14.6365 24.1477Z" fill="#D3D3D3"/>
              <circle cx="21.6817" cy="24.5" r="1.40909" fill="#626668"/>
              <circle cx="28.0226" cy="24.5" r="1.40909" fill="#626668"/>
            </svg>
          `;
        }
        if (variables.state === 'on' && variables.timeout > 2000) {
          return `
            <svg viewBox="0 0 50 50">
              <rect x="9" y="9" width="31" height="31" rx="2.95238" fill="#AEA06D"/>
              <path d="M14.6365 24.1477C14.6365 19.3568 17.1024 16.0454 18.1592 16.0454H30.4887C31.5456 16.0454 34.3637 18.5113 34.3637 24.1477C34.3637 29.784 31.8978 32.6022 30.4887 32.6022H18.1592C17.1024 32.6022 14.6365 30.1363 14.6365 24.1477Z" fill="#D3D3D3"/>
              <circle cx="21.6817" cy="24.5" r="1.40909" fill="#626668"/>
              <circle cx="28.0226" cy="24.5" r="1.40909" fill="#626668"/>
            </svg>
          `;
        }
        if (variables.state === 'off' && variables.timeout < 2000) {
          return `
            <svg viewBox="0 0 50 50"> ${style}
              <rect x="9" y="9" width="31" height="31" rx="2.95238" fill="#7A7D7D"/>
              <path d="M14.6365 24.1476C14.6365 19.3567 17.1024 16.0453 18.1592 16.0453H30.4887C31.5456 16.0453 34.3637 18.5112 34.3637 24.1476C34.3637 29.7839 31.8978 32.6021 30.4887 32.6021H18.1592C17.1024 32.6021 14.6365 30.1362 14.6365 24.1476Z" fill="#9DA0A2"/>
              <circle cx="21.6817" cy="24.5" r="1.40909" fill="#7A7D7D"/>
              <circle cx="28.0226" cy="24.5" r="1.40909" fill="#7A7D7D"/>
            </svg>
          `;
        } else {
          return `
            <svg viewBox="0 0 50 50"> ${style} 
              ${path}
            </svg>
          `;
        }
      ]]]