/*
 * 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.
 */

@import "user_dashboard.css";

turbo-frame#analysis_result .placeholder {
  display: flex;
}
turbo-frame#analysis_result .loading-indicator {
  display: none;
}

turbo-frame#analysis_result[busy] .placeholder {
  display: none;
}
turbo-frame#analysis_result[busy] .loading-indicator {
  display: flex;
}

.bouncing-loader {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem; /* Equivalent to h-10, the height of the old svg */
  margin-bottom: 1rem; /* Equivalent to mt-4 */
}

.bouncing-loader > div {
  width: 1rem;
  height: 1rem;
  margin: 0 0.5rem;
  background: #818cf8; /* A fun indigo color */
  border-radius: 50%;
  animation: bouncing-loader 0.6s infinite alternate;
}

.bouncing-loader > div:nth-child(2) {
  animation-delay: 0.2s;
}

.bouncing-loader > div:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bouncing-loader {

  to {

    opacity: 0.1;

    transform: translateY(-1rem);

  }

}



[data-post-analysis-target~="toggleIcon"] {

  transition: transform 0.3s ease;

}



.rotate-180 {

  transform: rotate(180deg);

}