/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing .dot {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  display: inline-block;
  animation: typing-bounce 1.2s infinite ease-in-out;
}

.typing .dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing .dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }

  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* Range slider pseudo-elements cannot be styled with Tailwind, so CSS is required */
.contribution-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  border-radius: 9999px; /* rounded-full */
  background: white; /* bg-white */
  cursor: pointer;
  border: 1px solid rgb(209 213 219); /* border-gray-300 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); /* shadow-sm */
  margin-top: -0.375rem;
}

.contribution-slider::-moz-range-thumb {
  width: 1.25rem; /* w-5 */
  height: 1.25rem; /* h-5 */
  border-radius: 9999px; /* rounded-full */
  background: white; /* bg-white */
  cursor: pointer;
  border: 1px solid rgb(209 213 219); /* border-gray-300 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1); /* shadow-sm */
}

.contribution-slider::-webkit-slider-runnable-track {
  background: linear-gradient(to right, rgb(31 41 55) 0%, rgb(31 41 55) var(--slider-progress, 0%), rgb(229 231 235) var(--slider-progress, 0%), rgb(229 231 235) 100%); /* gray-800 fill, gray-200 remainder */
  border-radius: 9999px; /* rounded-full */
  height: 0.5rem; /* h-2 */
  width: 100%;
}

.contribution-slider::-moz-range-track {
  background: rgb(229 231 235); /* bg-gray-200 */
  border-radius: 9999px; /* rounded-full */
  height: 0.5rem; /* h-2 */
}

.contribution-slider::-moz-range-progress {
  background: rgb(31 41 55); /* gray-800 to match screenshots */
  border-radius: 9999px; /* rounded-full */
  height: 0.5rem; /* h-2 */
}