{"version":3,"file":"compactMonth.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/compactMonth/compactMonth.module.pcss"],"sourcesContent":["/* `--collapse` runs from 0 (the whole month) to 1 (only the selected week), written by the\n   component from the scroll position. Five rows fold away over five rows of scrolling, so the\n   clipped edge of the month and the top of the list below it stay level the whole way. */\n.compactMonth {\n  --row: 2.75em;\n  --weekdays: 1.75em;\n\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior-y: contain;\n\n  &-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n\n    /* The folded rows are clipped, not removed, so this box still spans all six: it must not\n       catch the taps meant for the list showing through below the fold. */\n    pointer-events: none;\n    user-select: none;\n    -webkit-touch-callout: none;\n  }\n\n  &-weekdays {\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    align-items: center;\n    height: var(--weekdays);\n    background: var(--background);\n    pointer-events: auto;\n  }\n\n  &-weekday {\n    font-size: 0.6875em;\n    font-weight: 600;\n    text-align: center;\n    color: var(--text-dark);\n  }\n\n  &-viewport {\n    height: calc(6 * var(--row));\n    clip-path: inset(0 0 calc(5 * var(--row) * var(--collapse, 0)) 0);\n    pointer-events: auto;\n\n    /* Horizontal swipes page the month or week; vertical ones fold it. */\n    touch-action: pan-y;\n  }\n\n  &-pane {\n    background: var(--background);\n  }\n\n  /* Keeps the selected week in view while the rows around it fold away above and below it.\n     Reduced motion is handled where `--collapse` is written, which is then only 0 or 1: freezing\n     this transform instead would clip the selected week out of view mid-fold. */\n  &-rows {\n    transform: translateY(calc(var(--selected-row, 0) * var(--row) * var(--collapse, 0) * -1));\n  }\n\n  &-week {\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    height: var(--row);\n\n    &-folding {\n      opacity: calc(1 - var(--collapse, 0));\n    }\n  }\n\n  &-cell {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 0.1875em;\n    min-width: 0;\n    outline: none;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &-outside {\n      color: var(--text-light);\n    }\n\n    &:focus-visible .compactMonth-number {\n      box-shadow: 0 0 0 2px var(--focus-border-color, var(--primary-color));\n    }\n  }\n\n  &-number {\n    display: grid;\n    place-items: center;\n    width: 1.875em;\n    height: 1.875em;\n    border-radius: 50%;\n    font-size: 0.9375em;\n    font-variant-numeric: tabular-nums;\n    transition:\n      background-color 0.15s ease,\n      color 0.15s ease;\n\n    &-today {\n      color: var(--custom-calendar-today-color);\n      font-weight: 700;\n    }\n\n    &-selected {\n      background: var(--text-color);\n      color: var(--background);\n      font-weight: 600;\n    }\n  }\n\n  &-dots {\n    display: flex;\n    gap: 2px;\n    height: 4px;\n  }\n\n  &-dot {\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background: var(--event-color, var(--primary-color));\n  }\n\n  /* Tall enough that the month can always fold all the way, however few events the day has. */\n  &-list {\n    min-height: calc(100% - var(--weekdays) - var(--row));\n    border-top: 1px solid var(--border-color);\n\n    &-title {\n      padding: 0.9em 1.25em 0.15em;\n      font-size: 0.8125em;\n      font-weight: 600;\n      color: var(--text-dark);\n    }\n  }\n}\n\n/* Today stays marked when it is also the selected day. */\n.compactMonth-number-today.compactMonth-number-selected {\n  background: var(--custom-calendar-today-color);\n  color: var(--text-on-primary);\n}\n\n/* Scrolls with the page it sits in, rather than on its own. Two classes, to outrank AgendaList's\n   own rule whichever stylesheet loads first. */\n.compactMonth .compactMonth-agenda {\n  flex: none;\n  overflow: visible;\n}\n"],"mappings":""}