.participant-option-card {
  align-items: center;
  background: var(--color-app-card-background);
  border: 1px solid color-mix(in oklab, var(--color-app-text) 30%, transparent);
  border-radius: 0.75rem;
  color: var(--color-app-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  min-height: 3.625rem;
  padding: 0.75rem 1rem;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.participant-option-indicator {
  align-items: center;
  border: 2px solid color-mix(in oklab, var(--color-app-text) 30%, transparent);
  border-radius: 9999px;
  color: transparent;
  display: inline-flex;
  flex: none;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}

.participant-option-input[type="checkbox"] + .participant-option-card .participant-option-indicator {
  border-radius: 0.25rem;
}

.participant-option-input:focus-visible + .participant-option-card,
.participant-rating-input:focus-visible + .participant-rating-card {
  outline: 2px solid var(--color-app-primary);
  outline-offset: 2px;
}

.participant-option-input:checked + .participant-option-card {
  background: linear-gradient(90deg, var(--color-app-primary), var(--color-app-primary-light));
  border-color: transparent;
  color: white;
}

.participant-option-input:checked + .participant-option-card .participant-option-indicator {
  background: white;
  border-color: white;
  color: var(--color-app-primary);
}

.participant-rating-card {
  align-items: center;
  background: var(--color-app-card-background);
  border: 1px solid color-mix(in oklab, var(--color-app-text) 30%, transparent);
  border-radius: 0.6rem;
  color: var(--color-app-header-text);
  cursor: pointer;
  display: flex;
  font-size: clamp(1.25rem, 6vw, 1.75rem);
  font-weight: 700;
  height: 3.25rem;
  justify-content: center;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.participant-rating-input:checked + .participant-rating-card {
  background: linear-gradient(135deg, var(--color-app-primary), var(--color-app-primary-light));
  border-color: transparent;
  color: white;
}