Untitled

#################################################
  #                                               #
  #                     BASE                      #
  #                                               #
  #################################################

  base:
    variables:
      state: >
        [[[ return entity === undefined || entity.state; ]]]
      timeout: >
        [[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
      consider_on: >
        [[[ return ['on', 'home', 'cool', 'fan_only', 'playing'].indexOf(entity === undefined || entity.state) !== -1; ]]]
    aspect_ratio: 1/1
    show_state: true
    show_icon: false
    state_display: >
      [[[ if (variables.state === true) return 'Unknown'; ]]]
    tap_action:
      ui_sound_tablet: |
        [[[
          let screensaver = states['switch.galaxy_tab_a_screensaver'] === undefined || 
            states['switch.galaxy_tab_a_screensaver'].state;

          if (variables.state === 'off' && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
              entity_id: 'media_player.browser_9c06ce87_d1cf313c',
              media_content_id: '/local/sound/on.m4a',
              media_content_type: 'music'
            });
          }
          if (variables.state === 'on' && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
              entity_id: 'media_player.browser_9c06ce87_d1cf313c',
              media_content_id: '/local/sound/off.m4a',
              media_content_type: 'music'
            });
          }
        ]]]
      animation_card: |
        [[[
          let time = 900;
          this.shadowRoot.getElementById('card').style.animation =
            `card_bounce ${time}ms cubic-bezier(0.22, 1, 0.36, 1)`,
            window.setTimeout(() => {
              this.shadowRoot.getElementById('card').style.animation = 'none'
            }, time);
        ]]]
      action: toggle
      haptic: medium
    styles:
      grid:
        - grid-template-areas: |
            "icon  circle"
            "n     n"
            "s     s"
        - grid-template-columns: repeat(2, 1fr)
        - grid-template-rows: auto repeat(2, min-content)
        - gap: 2%
        - align-items: start
      name:
        - justify-self: start
        - line-height: 115%
      state:
        - justify-self: start
        - line-height: 115%
      card:
        - font-family: Open Sans Hebrew
        - border-radius: var(--custom-button-card-border-radius)
        - -webkit-tap-highlight-color: rgba(0,0,0,0)
        - transition: none
        - padding: 10%
        - --mdc-ripple-color: >
            [[[
              return variables.consider_on ?
                'rgb(0, 0, 0)' :
                'rgba(255, 255, 255, 0.3)';
            ]]]
        - color: >
            [[[
              return variables.consider_on ?
                'rgba(0, 0, 0, 0.6)' :
                'rgba(255, 255, 255, 0.3)';
            ]]]
        - background-color: >
            [[[
              return variables.consider_on ?
                'rgba(255, 255, 255, 0.8)' :
                'rgba(115, 115, 115, 0.2)';
            ]]]
    extra_styles: |
      [[[
        if (entity) {
          let hs = entity.attributes.hs_color == undefined,
            h = hs || entity.attributes.hs_color[0],
            s = hs || entity.attributes.hs_color[1],
            l_min = 28,
            l_max = 48,
            l_calc = 
              entity.attributes.brightness / 2.54 * (l_max - l_min) / 100 + l_min;
          var light_color = 
            entity.attributes.color_mode === 'color_temp'
              ? `hsl(204, 58%, ${l_calc}%);`
              : `hsl(${h}, ${s}%, ${l_calc}%);`;
        }
        return `
          svg {
            --light-color:
            ${ variables.state === 'on' && entity.attributes.brightness != undefined
                ? light_color
                : variables.state === 'on' && entity.attributes.brightness == undefined
                ? 'var(--state-icon-active-color);'
                : 'var(--state-icon-color);'
            }
          }
          #container {
            text-align: left !important;
          }
          #name, #state {
            font-size: 1.34vw;
            letter-spacing: 0.05vw;
          }
          /* portrait */
          @media screen and (max-width: 1200px) {
            #name, #state {
              font-size: 2vw;
              letter-spacing: 0.05vw;
            }
          }
          /* phone */
          @media screen and (max-width: 800px) {
            #name, #state {
              font-size: 3.1vw;
              letter-spacing: 0.12vw;
            }
          }
          @keyframes card_bounce {
            0% {
              transform: scale(1);
            }
            15% {
              transform: scale(0.9);
            }
            25% {
              transform: scale(1);
            }
            30% {
              transform: scale(0.98);
            }
            100% {
              transform: scale(1);
            }
          }
        `
      ]]]