/* Visible subject colors; semantic lesson states still take priority. */
:where(.lesson-card, .week-lesson, .parallel-option, .selection-card) {
  background-color: color-mix(in srgb, var(--lesson-color, var(--faint)) 18%, var(--surface));
  background-image: linear-gradient(
    105deg,
    color-mix(in srgb, var(--lesson-color, var(--faint)) 32%, transparent),
    transparent 76%
  );
  border-left-color: var(--lesson-color, var(--faint));
}

.lesson-card-aside .room-badge {
  border: 1px solid color-mix(in srgb, var(--lesson-color, var(--faint)) 24%, var(--line));
  background-color: color-mix(in srgb, var(--lesson-color, var(--faint)) 11%, var(--surface-muted));
}

[data-theme="light"] :where(.lesson-card, .week-lesson, .parallel-option, .selection-card) {
  background-color: color-mix(in srgb, var(--lesson-color, var(--faint)) 14%, #fff);
  background-image: linear-gradient(
    105deg,
    color-mix(in srgb, var(--lesson-color, var(--faint)) 27%, transparent),
    transparent 76%
  );
}