type: custom:mod-card
card:
  type: custom:fluid-level-background-card
  card:
    show_name: true
    show_icon: true
    show_state: false
    type: glance
    entities:
      - entity: valve.khzn_1_switch_1
        tap_action:
          action: toggle
        double_tap_action:
          action: more-info
    state_color: false
  full_value: 100
  severity:
    - color:
        - 3
        - 169
        - 244
      value: 60
  entity: sensor.accent_battery_level
  show-bubbles: true
  bubbles-color: white
style: |
  ha-card {
    position: relative;
    overflow: hidden;
  }
  .bubble {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    opacity: 0.5;
    animation: rise 5s infinite;
  }
  @keyframes rise {
    0% {
      transform: translateY(0);
      opacity: 0.5;
    }
    50% {
      transform: translateY(-200px);
      opacity: 0.7;
    }
    100% {
      transform: translateY(-400px);
      opacity: 0;
    }
  }
  .bubble:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
  }
  .bubble:nth-child(2) {
    left: 30%;
    animation-delay: 2s;
  }
  .bubble:nth-child(3) {
    left: 50%;
    animation-delay: 4s;
  }
  .bubble:nth-child(4) {
    left: 70%;
    animation-delay: 1s;
  }
  .bubble:nth-child(5) {
    left: 90%;
    animation-delay: 3s;
  }
extra_styles: |
  <style>
    .bubble {
      position: absolute;
      bottom: 0;
      width: 20px;
      height: 20px;
      background: rgba(255, 255, 255, 0.7);
      border-radius: 50%;
      opacity: 0.5;
      animation: rise 5s infinite;
    }
    @keyframes rise {
      0% {
        transform: translateY(0);
        opacity: 0.5;
      }
      50% {
        transform: translateY(-200px);
        opacity: 0.7;
      }
      100% {
        transform: translateY(-400px);
        opacity: 0;
      }
    }
    .bubble:nth-child(1) {
      left: 10%;
      animation-delay: 0s;
    }
    .bubble:nth-child(2) {
      left: 30%;
      animation-delay: 2s;
    }
    .bubble:nth-child(3) {
      left: 50%;
      animation-delay: 4s;
    }
    .bubble:nth-child(4) {
      left: 70%;
      animation-delay: 1s;
    }
    .bubble:nth-child(5) {
      left: 90%;
      animation-delay: 3s;
    }
  </style>
  <div class="bubbles-container">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
  </div>