/**
 * @file
 * Styles for the proactive checkbox selection limit (engage-checkbox-limit).
 *
 * @see js/checkbox-limit.js
 */

/* A locked option is greyed out and not selectable. */
.engage-checkbox-limit-locked {
  opacity: 0.5;
}

.engage-checkbox-limit-locked input,
.engage-checkbox-limit-locked label {
  cursor: not-allowed;
}

/* The option a respondent just tried to over-select is highlighted in red. */
.engage-checkbox-limit-error-active {
  opacity: 1;
}

.engage-checkbox-limit-error-active label {
  color: #c0392b;
  font-weight: 600;
}

.engage-checkbox-limit-error-active input[type="checkbox"] {
  outline: 2px solid #c0392b;
  outline-offset: 1px;
  accent-color: #c0392b;
}

/* The small inline message explaining the limit. */
.engage-checkbox-limit-error {
  margin-top: 0.25em;
  color: #c0392b;
  font-size: 0.85em;
  font-weight: 600;
}