/* /sales/action_ratings (Sales::ActionRatingsController#index) — the Action Rater. */

.sales-action-ratings {
  max-width: 44rem;
  margin-inline: auto;
  color: var(--text-primary);
}

.sales-action-ratings-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  transition: opacity 120ms ease, background-color 120ms ease;

  &.is-saving { opacity: 0.5; }
  &.is-error  { background-color: var(--background-highlight); }
}

.sales-action-ratings-labels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.sales-action-ratings-id { margin-left: auto; }

.sales-action-ratings-genes {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.sales-action-ratings-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.sales-action-ratings-score { min-width: var(--spacing-48); }

/* ---------- Progress and distribution ---------- */
.sales-action-ratings-stats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.sales-action-ratings-distribution {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.sales-action-ratings-bar-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.sales-action-ratings-bar-track {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
}

/* A <meter> per score. Chrome paints the pseudo-elements only while the
   element keeps its native appearance, so no `appearance: none` here. */
.sales-action-ratings-bar {
  flex: 1 1 auto;
  height: var(--spacing-8);
  border: 0;
  background: none;

  &::-webkit-meter-bar { height: var(--spacing-8); background: var(--background-hover); border: 0; border-radius: var(--corner-radius-full); }
  &::-webkit-meter-optimum-value { background: var(--border-brand); border-radius: var(--corner-radius-full); }
  &::-moz-meter-bar { background: var(--border-brand); border-radius: var(--corner-radius-full); }
}