/*
Designed to override the style in OBS for Voice Widget obtained from https://streamkit.discord.com/overlay.
*/

:root {
  /*avatar urls*/
  --POPCAT_IDLE_ANIMATION_LINK: url("https://media.discordapp.net/attachments/633348058465304589/1399002937123934288/pop_cat_1.png?ex=68876a84&is=68861904&hm=aa3ed845990ae591323cb988e80349a758f15d953ba01019e04bf8bf9792a346&=&format=webp&quality=lossless");
  --POPCAT_TALKING_ANIMATION_LINK: url("https://media.discordapp.net/attachments/633348058465304589/1399002937442959480/pop_cat_2.png?ex=68876a84&is=68861904&hm=8d9ab0d710dbbad3444ca8982942d8eb438b0c6c344f6f1861826b1e1918295e&=&format=webp&quality=lossless");  
  --GREENCAT_IDLE_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/375414537488302081/1399102720962728088/image.png?ex=6887c772&is=688675f2&hm=8d0a38d793fe635903f994e0a3fae2ad6b6617e09319f0af246a17f533a8e114&");
  --GREENCAT_TALKING_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/375414537488302081/1399050443199348787/tenor.gif?ex=688796c2&is=68864542&hm=08ec3bd09a4a0d6133759b541b706f1eb3a0f624294ac5ce43593c8b306cc866&");
  --OMNIMAN_STANDING_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/375414537488302081/1399101749956186263/image.png?ex=6887c68b&is=6886750b&hm=1678dc64979e80a5f82514eefd7777246371cbf70cf15cdd2bf1c6614341f3df&");
  --OMNIMAN_SITTING_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/375414537488302081/1399053727184322590/image.png?ex=688799d1&is=68864851&hm=f00bb0b80a4e9b83d38ac4a1752e21290814fa946a386c90d989b17ccc4e28e0&");
  --MUSIC_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/633348058465304589/1399086761837072514/tenor-1.gif?ex=6887b895&is=68866715&hm=68162e6c0cdda39f32a129fb2e1ea2550c7265e1dc04478245ef150086ad221f&");
  --BORGAR_TALKING_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/375414537488302081/1399132002246201344/gif.gif?ex=6887e2b7&is=68869137&hm=f74283f2c3f62964c36a34295b50512884546bdf59d7a0a4633840fa3324deea&");
  --BORGAR_IDLE_ANIMATION_LINK: url("https://cdn.discordapp.com/attachments/375414537488302081/1399132695358996694/image.png?ex=6887e35d&is=688691dd&hm=b2a058e9266fce3d5e37ef25ee4f404f849d9aa40c8dee607b412b27eaa0e065&");
  
  --OWL_IDLE1: url("https://media.discordapp.net/attachments/633348058465304589/1406220214995124287/image.png?ex=68a1ac21&is=68a05aa1&hm=f92f1f6a97c2af03440e8b9c1aa415982e22879618d332de8065eb9f9097a751&=&format=webp&quality=lossless");
  --OWL_IDLE2: url("https://media.discordapp.net/attachments/633348058465304589/1406220215368552478/image.png?ex=68a1ac21&is=68a05aa1&hm=e98b172a5cce1b7429840c82a17b54cd38f1dff391d8a11e4471cd9732044b0f&=&format=webp&quality=lossless");
  --OWL_TALKING1: url("https://media.discordapp.net/attachments/633348058465304589/1406220215712223292/image.png?ex=68a1ac21&is=68a05aa1&hm=5d01b6415e66745006c54591a6c3fe24b07974be8aecf3c02446d1d09b962e7f&=&format=webp&quality=lossless");
  --OWL_TALKING2: url("https://media.discordapp.net/attachments/633348058465304589/1406220215972266045/image.png?ex=68a1ac21&is=68a05aa1&hm=d1b2cfc1373ade34b1a42d2880f1dbc9716299200388a40c0573487868d3b547&=&format=webp&quality=lossless");
      
  /*avatar properties*/
  --IDLE_BRIGHTNESS: 50%;
  --DISPLAY_UNREGISTERED_USERS: block; /*none | block*/
  --TALKING_ANIMATION: bounce 0.3s infinite;
  --AVATAR_HEIGHT: 150px;
  
  /*avatar line property*/
  --TOP_BORDER: auto;
  --LEFT_BORDER: auto;
  --RIGHT_BORDER: auto;
  --BOTTOM_BORDER: auto;
  --LINE_DIRECTION: row;
  --LINE_GAP: 5px;
}

body {
  /* background-color: red; */
  background-color: rgba(0, 0, 0, 0) !important;
  margin: 0px auto;
  overflow: hidden;
}

div.voice_container {
  /* background-color: greenyellow; */
  position: absolute;
  top: var(--TOP_BORDER);
  left: var(--LEFT_BORDER);
  right: var(--RIGHT_BORDER);
  bottom: var(--BOTTOM_BORDER);
  /* transform: translate(50%, 50%); */
}

img.voice_avatar {
  margin: 0;    
  height: var(--AVATAR_HEIGHT);
  width: var(--AVATAR_HEIGHT);
}
  
ul.voice_states {
  display: flex;
  list-style: none;
  flex-direction: var(--LINE_DIRECTION);
  padding: 0;
  margin: 0;
  gap: var(--LINE_GAP);
}
  
li.voice_state {
  display: var(--DISPLAY_UNREGISTERED_USERS); 
  margin: 0;
  transition: filter 0.3s ease;
  height: var(--AVATAR_HEIGHT);
  order: 0;
} 

/*
USER STATES
*/

li.voice_state {
  filter: brightness(var(--IDLE_BRIGHTNESS));
  content:var(--IDLE_ANIMATION_LINK);  
  animation: blink 1s infinite steps(1);
}

li.voice_state.wrapper_speaking {
  content:var(--TALKING_ANIMATION_LINK, var(--IDLE_ANIMATION_LINK));
  filter: brightness(100%);
  animation: bounce 0.3s normal, blink 1s infinite steps(1);
}
  
li.voice_state.self_mute {
  content:var(--MUTE_ANIMATION_LINK, var(--IDLE_ANIMATION_LINK));
}

li.voice_state.self_deaf {
  content:var(--DEAF_ANIMATION_LINK, var(--IDLE_ANIMATION_LINK));
}  

/*
ANIMATIONS
*/

@keyframes blink {
  0%   { 
  --IDLE_ANIMATION_LINK: var(--SPRITE1);
  --TALKING_ANIMATION_LINK: var(--SPRITE3);
    }
  50% {
  --IDLE_ANIMATION_LINK: var(--SPRITE2);
  --TALKING_ANIMATION_LINK: var(--SPRITE4);
    }
  100%   { 
  --IDLE_ANIMATION_LINK: var(--SPRITE1);
  --TALKING_ANIMATION_LINK: var(--SPRITE3);
    }
}


@keyframes bounce {
  0%   { transform: translateY(0); }
  75% { transform: scale(105%) translateY(-2.5%); }
  100%   { transform: translateY(0); }
}


/*
USER AVATARS
*/



li.voice_state[data-userid="290911526569771008"] {
  display: block; 
  --IDLE_ANIMATION_LINK: var(--OWL_IDLE1);
  --TALKING_ANIMATION_LINK: var(--OWL_TALKING1);

  --SPRITE1: var(--OWL_IDLE1);
  --SPRITE2: var(--OWL_IDLE2);
  --SPRITE3: var(--OWL_TALKING1);
  --SPRITE4: var(--OWL_TALKING2);
}