progress:
  variables:
    min_value: 5
    max_value: 40
    normal_value: 19
    high_value: 23
    low_color: "var(--primary-color)"
    normal_color: "var(--color-green)"
    high_color: "var(--color-red)"
    degrees: 180
  triggers_update: all
  show_state: true
  show_name: true
  styles:
    name:
      - position: absolute
      - top: "[[[ return this.___config.show_state ? '65%' : 'initial' ]]]"
      - display: flex
      - align-items: center
      - justify-content: center
      - width: 100%
      - height: "[[[ return this.___config.show_state ? 'initial' : '100%' ]]]"
      - font-size: 1em
    state:
      - position: absolute
      - top: "[[[ return this.___config.show_name ? '22%' : 'initial' ]]]"
      - display: flex
      - align-items: center
      - justify-content: center
      - width: 100%
      - height: "[[[ return this.___config.show_name ? 'initial' : '100%' ]]]"
      - font-size: 1.9em
    icon:
      - position: absolute
      - top: 0
      - right: 0
      - height: 16px
      - transform: translateX(5px)
    card:
      - background: >
          [[[
            const temp = entity.state;

            const color = temp < variables.normal_value
              ? variables.low_color
              : temp < variables.high_value
                ? variables.normal_color
                : variables.high_color;
            const percent = (temp - variables.min_value)/(variables.max_value - variables.min_value) * 100;
            const gradient = 100 - percent;
            const degrees = variables.degrees + "deg";

            return 'linear-gradient('+ degrees +', var(--paper-card-background-color) 0%, var(--paper-card-background-color)' + gradient + '%, ' + color + ' ' + gradient + '%)'
          ]]]