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: 4px
      - right: -4px
      - height: 16px
    img_cell:
      - position: initial
    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 min             = variables.min_value;
            const max             = variables.max_value;
            const percent         = Math.round((temp - min)/(max - min) * 100);
            const gradientPercent = 100 - percent;

            const gradient = [
              `${variables.degrees}deg`,
              'var(--paper-card-background-color) 0%',
              `var(--paper-card-background-color) ${gradientPercent}%`,
              `${color} ${gradientPercent}%`
            ]

            return `linear-gradient(${gradient.join(',')})`;
          ]]]