/* === Markers (duty / unavailable / vacation) */
.duty-marker,
.unavailable-marker,
.vacation-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  font-size: 0.55rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: box-shadow var(--transition-fast) ease-out;
}

.duty-marker {
  color: var(--duty);
  background: color-mix(in srgb, var(--duty) 25%, transparent);
}

.unavailable-marker {
  color: var(--unavailable);
  background: color-mix(in srgb, var(--unavailable) 25%, transparent);
}

.vacation-marker {
  color: var(--vacation);
  background: color-mix(in srgb, var(--vacation) 25%, transparent);
}

.duty-marker.calendar-marker-active {
  box-shadow: 0 0 0 2px var(--duty);
}

.unavailable-marker.calendar-marker-active {
  box-shadow: 0 0 0 2px var(--unavailable);
}

.vacation-marker.calendar-marker-active {
  box-shadow: 0 0 0 2px var(--vacation);
}