{"version":3,"file":"calendarHeader.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/calendarHeader/calendarHeader.module.pcss"],"sourcesContent":[".calendarHeader {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 0.5em 0.75em;\n  padding: 0.625em 0.75em;\n  border-bottom: 1px solid var(--border-color);\n\n  &-title {\n    flex: 1 1 6em;\n    min-width: 0;\n    overflow: hidden;\n    font-size: 1.125em;\n    font-weight: 600;\n    white-space: nowrap;\n\n    &-text {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      animation: calendarTitleIn 0.25s ease-out;\n    }\n  }\n\n  &-nav {\n    display: flex;\n    align-items: center;\n    gap: 0.25em;\n  }\n\n  &-today {\n    margin-right: 0.25em;\n  }\n}\n\n/* Two classes, to outrank OptionPicker's own `width: 100%` whichever stylesheet loads first.\n   OptionPicker's chip assumes equal options. As a flex row sized to its content they were equal\n   at the average label's width, and Month and Agenda were cut; `1fr` columns take the widest. */\n.calendarHeader .calendarHeader-views {\n  --option-picker-padding: 0.3125em 0.75em;\n\n  display: grid;\n  grid-auto-columns: 1fr;\n  grid-auto-flow: column;\n  flex: none;\n  width: auto;\n  font-size: 0.875em;\n}\n\n/* After the rule above, which it has to override on a narrow calendar: a row of its own, and\n   less padding, so four view names still fit at phone widths. The row leaves room for the New\n   event button after it: an ActionIcon under 2em wide and the 0.75em gap, both in the header's\n   font, not this 0.875em, and 0.5em to spare against rounding; growing takes the spare back. */\n.calendarHeader-compact .calendarHeader-views {\n  --option-picker-padding: 0.3125em 0.25em;\n\n  flex: 1 1 calc(100% - 3.25em / 0.875);\n}\n\n@keyframes calendarTitleIn {\n  from {\n    opacity: 0;\n    transform: translateX(calc(var(--title-from, 1) * 0.75em));\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .calendarHeader-title-text {\n    animation: none;\n  }\n}\n"],"mappings":""}