UV Index Card

[Zerosignal84]

Taking some inspiration from the Progressbar discussion #928 I built a card the follows the UV index. Hope somebody finds it useful!
https://en.wikipedia.org/wiki/Ultraviolet_index#:~:text=The%20UV%20index%20is%20a,a%20UV%20index%20of%206.

type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.pws_uvi
grid_options:
  columns: 6
  rows: 1
card_layout: large
style_templates:
  - home-assistant-default
styles: |2-
    :host{
        --color-low-icon:  #9063CD ;
        --color-moderate-icon:  #9063CD ;
        --color-alert-icon:  #9063CD ;
        --color-low: rgba(151, 215, 0, .4) ;
        --color-moderate: rgba(252, 227, 0, .6);
        --color-high: rgba(255, 130, 0, .6);
        --color-veryhigh: rgba(239, 51, 64, .6);
        --color-extreme: rgba(144, 99, 205, .6);
        --color-bar: ${state > 10 ? 'var(--color-extreme)'
                       : state > 7 ? 'var(--color-veryhigh)'
                       : state > 5 ? 'var(--color-high)'
                       : state > 2 ? 'var(--color-moderate)'
                       : 'var(--color-low)'} ;
        --color-background: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
        --color-notification-bubble:  ${state > 10 ? 'rgba(144, 99, 205, 1)'
                       : 'rgba(239, 51, 64, 1)'} ;
    }

    ha-icon {
      color: var(${ state > 0 ? '--color-low-icon':
                    state > 3 ? '--color-moderate-icon' :
                                '--color-alert-icon'}) 
                !important; }

    .bubble-button-card-container {
        background: linear-gradient(
      to right, 
      var(--color-bar) 0, 
      var(--color-bar) ${(state / 11) * 100}%, 
      var(--color-background) ${(state / 11) * 100}%,
      var(--color-background) 100%
    ) !important;
    }

    ha-card::after {
      position: absolute;
      top: -5px;
      left: -8px;
      padding: 0 10px;
      border-radius: 999px;
      border: 0px solid black;
      color: #fff;
      content: "${Math.round(state) >= 3 ? '!' : ''}";
      background: var(--color-notification-bubble);
      display: block;
    }
name: UV Index
show_last_changed: false
force_icon: false
show_attribute: false
visibility:
  - condition: state
    entity: sun.sun
    state: above_horizon

[Normanras]

This is really cool! I may have forgotten how to read, but where is the notification icon being defined when it should or should not display? I can't figure that one out.

Nevermind... 🤦🏼‍♂️