/* ------------------------------ */
/* ------------------------------ */

/*

0.  INPUT CURSOR
1.  EMOTICONS

*/

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 0. INPUT CURSOR */
/* ------------------------------------------------ */

@keyframes cursorBlink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.inputWrapper > .cursorWrapper > input:focus + .inputUnderline > span.active {
  color: blue;
  animation-name: cursorBlink;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.dark
  .inputWrapper
  > .cursorWrapper
  > input:focus
  + .inputUnderline
  > span.active {
  color: var(--color_active_dark);
}

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 1. BLINKING ELLIPSIS */
/* ----------------------------------------------------- */

@keyframes dotBlink_first {
  0% {
    opacity: 0;
  }
  17% {
    opacity: 1;
  }
  67% {
    opacity: 0;
  }
}
@keyframes dotBlink_second {
  0% {
    opacity: 0;
  }
  34% {
    opacity: 1;
  }
  84% {
    opacity: 0;
  }
}
@keyframes dotBlink_third {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* .collapseParent > .title:hover + .brackets > .dots > span:first-of-type {
  animation-name: dotBlink_first;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.collapseParent > .title:hover + .brackets > .dots > span:nth-of-type(2) {
  animation-name: dotBlink_second;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.collapseParent > .title:hover + .brackets > .dots > span:nth-of-type(3) {
  animation-name: dotBlink_third;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
} */

/* ------------------------------ */
/* ------------------------------ */

/* -------------------------------- 2. EMOTICONS */
/* --------------------------------------------- */

@keyframes showMouth {
  75% {
    opacity: 1;
  }
  92.5% {
    opacity: 0;
  }
}
@keyframes hideMouth {
  75% {
    opacity: 0;
  }
  92.5% {
    opacity: 1;
  }
}
.smiley > .animation > span#mouth > span:first-of-type {
  animation-name: hideMouth;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.smiley > .animation > span#mouth > span:last-of-type {
  opacity: 0;
  animation-name: showMouth;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}

@keyframes showNotes_first {
  0% {
    opacity: 0;
  }
  77.5% {
    opacity: 1;
  }
  85% {
    opacity: 0;
  }
}

.smiley .animation > .notes > span:first-of-type::before {
  opacity: 0;
  animation-name: showNotes_first;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}

@keyframes showNotes_second {
  0% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  87.5% {
    opacity: 0;
  }
}

.smiley .animation > .notes > span:nth-of-type(2):before {
  opacity: 0;
  animation-name: showNotes_second;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}

@keyframes showNotes_third {
  0% {
    opacity: 0;
  }
  82.5% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}

.smiley .animation > .notes > span:nth-of-type(3):before {
  opacity: 0;
  animation-name: showNotes_third;
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}

/* ------------------------------ */
/* ------------------------------ */