.date-context {
  --date-context-color: #2d8f67;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--date-context-color) 28%, #d7e0dd);
  border-left: 4px solid var(--date-context-color);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink, #1d2527);
  padding: 8px 11px;
}

.date-context[data-context="outside-year"],
.date-context[data-context="no-year"] {
  --date-context-color: #7b8582;
  background: #f4f5f3;
}

.date-context[data-context="optional-weekend"],
.date-context[data-context="rest"] {
  --date-context-color: #8b918c;
  background: #f7f7f4;
}

.date-context[data-context="field-trip"],
.date-context[data-context="camp"],
.date-context[data-context="project"],
.date-context[data-context="light"],
.date-context[data-context="custom"],
.date-context[data-context="mixed"] {
  --date-context-color: #2c8fb8;
  background: #f5fbfd;
}

.date-context-marker {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--date-context-color);
}

.date-context-date {
  flex: 0 0 auto;
  color: var(--muted, #607073);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.date-context strong {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.15;
}

.date-context-detail {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--muted, #607073);
  font-size: 0.76rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-context-launchpad {
  margin: -8px 0 20px;
}

.date-context-teacher {
  grid-column: 1 / -1;
  width: 100%;
}

.date-context-student {
  margin: -4px 0 16px;
}

.calendar-day.status-outside-year,
.day-column.status-outside-year,
.weekly-overview-cell.status-outside-year {
  border-color: #dfe3e0;
  background: #f1f2f0;
  color: #7b8582;
  box-shadow: none;
}

.calendar-day.status-outside-year {
  opacity: 0.72;
}

.legend-dot.status-outside-year {
  background: #dfe3e0;
}

@media (max-width: 620px) {
  .date-context {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .date-context-detail {
    flex-basis: 100%;
    margin-left: 19px;
    white-space: normal;
  }
}