/* stage-42-calendar-markers-polish: marker dots aligned with the contextual labels row. */

.calendar-sheet .focus-calendar-marker-row {
  justify-content: center;
  align-items: center;
  gap: 4px;
  min-height: 10px;
  max-height: 18px;
  padding-inline: 2px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.22));
}

.calendar-sheet .focus-calendar-marker-row:empty {
  opacity: 0;
  min-height: 0;
  filter: none;
}

.calendar-sheet .focus-calendar-marker {
  --calendar-marker-color: var(--primary);
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--calendar-marker-color);
  border: 1px solid color-mix(in srgb, #fff 62%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--calendar-marker-color) 15%, transparent),
    0 0 12px color-mix(in srgb, var(--calendar-marker-color) 42%, transparent);
  opacity: 0.96;
  transform: translateZ(0);
  transition:
    transform var(--focus-motion-standard),
    opacity var(--focus-motion-standard),
    box-shadow var(--focus-motion-standard);
}

.calendar-sheet .focus-calendar-marker.blue {
  --calendar-marker-color: var(--label-reminder, #5678f5);
  background: var(--calendar-marker-color);
}

.calendar-sheet .focus-calendar-marker.red {
  --calendar-marker-color: var(--label-birthday, #d96b5f);
  background: var(--calendar-marker-color);
}

.calendar-sheet .focus-calendar-marker.green {
  --calendar-marker-color: var(--label-study, #5f9073);
  background: var(--calendar-marker-color);
}

.calendar-sheet .focus-calendar-cell:hover .focus-calendar-marker,
.calendar-sheet .focus-calendar-cell:focus-visible .focus-calendar-marker {
  transform: translateY(-1px) scale(1.08);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--calendar-marker-color) 18%, transparent),
    0 0 16px color-mix(in srgb, var(--calendar-marker-color) 50%, transparent);
}

.calendar-sheet .focus-calendar-cell-selected .focus-calendar-marker {
  border-color: color-mix(in srgb, #fff 74%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--calendar-marker-color) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--calendar-marker-color) 54%, transparent);
}

.calendar-sheet .focus-calendar-cell-current .focus-calendar-marker {
  opacity: 1;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--calendar-marker-color) 20%, transparent),
    0 0 18px color-mix(in srgb, var(--calendar-marker-color) 52%, transparent);
}

.calendar-sheet .focus-calendar-cell-muted .focus-calendar-marker {
  opacity: 0.48;
  filter: saturate(0.74);
}

:root[data-theme="dark"] .calendar-sheet .focus-calendar-marker {
  border-color: color-mix(in srgb, #fff 52%, transparent);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--calendar-marker-color) 18%, transparent),
    0 0 15px color-mix(in srgb, var(--calendar-marker-color) 48%, transparent);
}

@media (max-width: 760px) {
  .calendar-sheet .focus-calendar-marker-row {
    gap: 3px;
    max-height: 13px;
    padding-inline: 1px;
  }

  .calendar-sheet .focus-calendar-marker {
    width: 5px;
    height: 5px;
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--calendar-marker-color) 12%, transparent),
      0 0 10px color-mix(in srgb, var(--calendar-marker-color) 38%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-sheet .focus-calendar-marker {
    transition: none;
  }

  .calendar-sheet .focus-calendar-cell:hover .focus-calendar-marker,
  .calendar-sheet .focus-calendar-cell:focus-visible .focus-calendar-marker {
    transform: none;
  }
}