/*
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&");
  
   
  /*avatar properties*/
  --IDLE_BRIGHTNESS: 50%;
  --DISPLAY_UNREGISTERED_USERS: block; /*none | block*/
  --TALKING_ANIMATION: bounce 0.3s normal;
  --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);  
}

li.voice_state.wrapper_speaking {
  content:var(--TALKING_ANIMATION_LINK, var(--IDLE_ANIMATION_LINK));
  filter: brightness(100%);
  animation: var(--TALKING_ANIMATION);
}
  
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 bounce {
  0%   { transform: translateY(0); }
  75% { transform: scale(105%) translateY(-2.5%); }
  100%   { transform: translateY(0); }
}

@keyframes shake {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  10%  { transform: translate(-2px, -2px) rotate(-1deg); }
  20%  { transform: translate(2px, -2px) rotate(1deg); }
  30%  { transform: translate(-2px, 2px) rotate(0deg); }
  40%  { transform: translate(2px, 2px) rotate(1deg); }
  50%  { transform: translate(-2px, -2px) rotate(-1deg); }
  60%  { transform: translate(2px, -2px) rotate(0deg); }
  70%  { transform: translate(-2px, 2px) rotate(1deg); }
  80%  { transform: translate(2px, 2px) rotate(-1deg); }
  90%  { transform: translate(-2px, -2px) rotate(0deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

@keyframes boing {
  0%    { transform: scaleX(0.98) scaleY(0.75); }
  6.25% { transform: scaleX(0.96) scaleY(0.67); }
  12.5% { transform: scaleX(0.88) scaleY(0.58); }
  18.75%{ transform: scaleX(0.79) scaleY(0.50); }
  25%   { transform: scaleX(0.71) scaleY(0.58); }
  31.25%{ transform: scaleX(0.62) scaleY(0.67); }
  37.5% { transform: scaleX(0.54) scaleY(0.75); }
  43.75%{ transform: scaleX(0.58) scaleY(0.83); }
  50%   { transform: scaleX(0.50) scaleY(0.92); }
  56.25%{ transform: scaleX(0.58) scaleY(0.96); }
  62.5% { transform: scaleX(0.67) scaleY(1.00); }
  68.75%{ transform: scaleX(0.75) scaleY(0.96); }
  75%   { transform: scaleX(0.83) scaleY(0.92); }
  81.25%{ transform: scaleX(0.92) scaleY(0.83); }
  87.5% { transform: scaleX(0.96) scaleY(0.75); }
  93.75%{ transform: scaleX(0.98) scaleY(0.67); }
  100%  { transform: scaleX(1.00) scaleY(0.70); }
}

/*
USER AVATARS
*/

/*Example*/
li.voice_state[data-userid="123456789"] {
  display: block; 
  --IDLE_ANIMATION_LINK: var(--POPCAT_IDLE_ANIMATION_LINK);
  --TALKING_ANIMATION_LINK: var(--POPCAT_TALKING_ANIMATION_LINK);
  --MUTE_ANIMATION_LINK: url("some_url_to_image");
  --DEAF_ANIMATION_LINK: url("some_url_to_image");
  order: 0; /*order in line*/
}