/*!
 * lobby/chat.css
 * (c) 2021 newfire.com
 */


chat {
  position: fixed;
  left: 4;
  bottom: 44;
  max-width: 300;
  text-align: left;
  color: white;

  z-index: 1;
  //background-color: rgba(0 0 0/.2);
}

chat:hover form[live=true]{
  background-color: rgba(0 0 0/.5);
}

chat form{
  padding: 2;
  display: flex;
  flex-wrap: wrap;
  border-radius: 5px;
}

chat input {
  //background: url(/images/chat.svg) no-repeat left;
  //background-size: 17px auto;
  background: transparent;
  border: 0;
  border-bottom: 1px solid silver;
  margin: 0;
  font-size: 17;
  color: white;
  vertical-align: top;
  padding: 2 6;

  flex-grow: 1;
  width: 100;
}
chat input:hover{
  //background-color: rgba(222,222,222,.2);
}

chat lines{
  color: silver;
  flex: 0 0 100%;
  overflow: auto;
  max-height: 70vh;
  margin: 0 0 4 0;

  -ms-overflow-style: none;  /* hide scrollbar for IE and Edge */
  scrollbar-width: none;  /* hide scrollbar for Firefox */
}
/* hide scrollbar for chrome, safari, opera */
chat lines::-webkit-scrollbar {
  display: none;
}

chat input, 
chat line {
  display: block;
  margin: 0;
  word-break: break-word;

  //animation: name duration delay fill-mode;
  animation: hide-chat 0s 9s forwards;
}

/* show lines again on hover */
chat:hover input,
chat:hover line {
  animation: show-chat forwards;
}


/* button to submit on input.click and toggle on/off */
chat button{
  //visibility: hidden;
  grid-row: 2;
  width: fit-content;
  background-color: rgba(222,222,222,.2);
  flex: 0 1;
}

chat form[live=false] >lines,
chat form[live=false] >input{
  display: none;
}
chat form[live=false] >button{
  background-color: rgba(222,2,2,.2);
}


chat me {
  color: orange;
}

chat .mi{
  position: absolute;
  left: 0;
  bottom: 0;
}



@keyframes show-chat {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hide-chat {
  from { opacity: 1; }
  to { 
    opacity: 0; 
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
  }
}