/* 
  CSS for the tagline component.
  This component displays a tagline with a typewriter effect.
  Adapted from: https://css-tricks.com/snippets/css/typewriter-effect/ 
*/

tagline-component {
  text-transform: uppercase;
  min-width: 5rem;
  display: inline-flex;
}

tagline-component p {
  font-family: monospace;
  border-right: 0.15em solid var(--gray);
  white-space: nowrap;
  margin: 0;
  text-overflow: clip;
  color: var(--gray);
  /* Overflow can be used safely in this case */
  /* stylelint-disable-next-line */
  overflow-x: hidden;
  letter-spacing: 0.15em;
  animation:
    typing var(--long-animation-time) steps(40, end),
    blink-caret var(--animation-time) step-end infinite;
}

tagline-component p.hiding {
  animation:
    typing-delete var(--long-animation-time) steps(40, end),
    blink-caret var(--animation-time) step-end infinite;
}

tagline-component p.hidden {
  display: none;
}

@keyframes typing {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes typing-delete {
  0% {
    width: 100%;
  }

  100% {
    width: 0;
  }
}

@keyframes blink-caret {
  0%,
  100% {
    border-color: transparent;
  }

  50% {
    border-color: var(--gray);
  }
}