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

.assessment-section-progress {
  --section-border: #dad2ef;
  --section-bg: #ffffff;
  --section-text: #34363b;
  --section-muted: #6d6a62;
  --section-bar-track: #f2ebff;
  --section-bar: #7442e0;

  background-color: var(--section-bg);
  border-color: var(--section-border);
  color: var(--section-text);
}

.assessment-section-progress[data-state] .assessment-section-progress__name,
.assessment-section-progress[data-state] .assessment-section-progress__meta,
.assessment-section-progress[data-state] .assessment-section-progress__theme {
  color: inherit;
}

.assessment-section-progress[data-state] .assessment-section-progress__theme,
.assessment-section-progress[data-state] .assessment-section-progress__meta {
  color: var(--section-muted);
}

.assessment-section-progress[data-state] .assessment-section-progress__bar-track {
  background-color: var(--section-bar-track);
}

.assessment-section-progress[data-state] .assessment-section-progress__bar {
  background-color: var(--section-bar);
}

.assessment-section-progress[data-state="active"] {
  --section-border: #7442e0;
  --section-bg: #f2ebff;
  --section-text: #0b0c0d;
  --section-muted: #562daf;
  --section-bar-track: #dad2ef;
  --section-bar: #7442e0;
}

.assessment-section-progress[data-state="complete"][data-score-state="poor"] {
  --section-border: #b42318;
  --section-bg: #fff1f0;
  --section-text: #7a271a;
  --section-muted: #7a271a;
  --section-bar-track: #ffd6d2;
  --section-bar: #b42318;
}

.assessment-section-progress[data-state="complete"][data-score-state="below-average"] {
  --section-border: #b54708;
  --section-bg: #fff4e5;
  --section-text: #7a2e0e;
  --section-muted: #7a2e0e;
  --section-bar-track: #fed7aa;
  --section-bar: #b54708;
}

.assessment-section-progress[data-state="complete"][data-score-state="mixed"] {
  --section-border: #a16207;
  --section-bg: #fef9c3;
  --section-text: #713f12;
  --section-muted: #713f12;
  --section-bar-track: #fde68a;
  --section-bar: #a16207;
}

.assessment-section-progress[data-state="complete"][data-score-state="good"] {
  --section-border: #2f855a;
  --section-bg: #edf7ed;
  --section-text: #1f5132;
  --section-muted: #1f5132;
  --section-bar-track: #bfe6c8;
  --section-bar: #2f855a;
}

.assessment-section-progress[data-state="complete"][data-score-state="excellent"] {
  --section-border: #276749;
  --section-bg: #e6f4ea;
  --section-text: #16412d;
  --section-muted: #16412d;
  --section-bar-track: #a8d8b9;
  --section-bar: #276749;
}

.assessment-panel-stage-transitioning {
  transition: height 300ms ease;
}

.assessment-panel-incoming {
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.assessment-panel-enter-right {
  animation: assessment-panel-enter-right 320ms cubic-bezier(.22, 1, .36, 1) both;
}

.assessment-panel-enter-left {
  animation: assessment-panel-enter-left 320ms cubic-bezier(.22, 1, .36, 1) both;
}

.assessment-panel-exit-left {
  animation: assessment-panel-exit-left 320ms cubic-bezier(.22, 1, .36, 1) both;
}

.assessment-panel-exit-right {
  animation: assessment-panel-exit-right 320ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes assessment-panel-enter-right {
  from { transform: translateX(105%); }
  to { transform: translateX(0); }
}

@keyframes assessment-panel-enter-left {
  from { transform: translateX(-105%); }
  to { transform: translateX(0); }
}

@keyframes assessment-panel-exit-left {
  from { transform: translateX(0); }
  to { transform: translateX(-105%); }
}

@keyframes assessment-panel-exit-right {
  from { transform: translateX(0); }
  to { transform: translateX(105%); }
}

@media (prefers-reduced-motion: reduce) {
  .assessment-panel-stage-transitioning {
    transition: none;
  }

  .assessment-panel-enter-right,
  .assessment-panel-enter-left,
  .assessment-panel-exit-left,
  .assessment-panel-exit-right {
    animation: none;
  }
}