{"version":3,"file":"timeGrid.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/timeGrid/timeGrid.module.pcss"],"sourcesContent":["/* One vertical scroller holds the sticky head and the body, so the head's day columns line up\n   with the body's by construction, scrollbar or not. Only the two tracks inside move sideways.\n   Everything positioned in time uses percentages of the day, so zooming rewrites one custom\n   property and nothing else. */\n.timeGrid {\n  --gutter: 3.5em;\n  --lane: 1.375em;\n\n  position: relative;\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n  overscroll-behavior: contain;\n  outline: none;\n  user-select: none;\n  -webkit-touch-callout: none;\n\n  /* Horizontal swipes page, pinches zoom, vertical drags still scroll. */\n  touch-action: pan-y;\n\n  &-head {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n    display: grid;\n    grid-template-columns: var(--gutter) minmax(0, 1fr);\n    border-bottom: 1px solid var(--border-color);\n    background: var(--background);\n  }\n\n  &-corner {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: flex-end;\n    padding-bottom: 0.25em;\n  }\n\n  /* At the top, level with the weekday names, while the toggle stays at the bottom. Wraps rather\n     than spill over the first day: a translation such as `Semaine 40` is wider than the gutter. */\n  &-weekNumber {\n    max-width: 100%;\n    margin-bottom: auto;\n    padding-top: 0.55em;\n    overflow-wrap: anywhere;\n    font-size: 0.6875em;\n    font-weight: 600;\n    text-align: center;\n    color: var(--text-light);\n  }\n\n  /* Points down to expand and up to collapse: the rotation says which, so it stays. Two classes,\n     to outrank Button's own font-size whichever stylesheet loads first. */\n  & &-toggle {\n    font-size: 0.75em;\n    transition: transform 0.2s ease;\n\n    &-open {\n      transform: rotate(180deg);\n    }\n  }\n\n  &-headPane {\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    align-content: start;\n    background: var(--background);\n  }\n\n  &-dayHeader {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 0.125em;\n    padding: 0.375em 0 0.25em;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n\n    &-link {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &:hover .timeGrid-dayNumber:not(.timeGrid-dayNumber-today) {\n        background: var(--background-accent-light);\n      }\n\n      &:focus-visible {\n        outline: 2px solid var(--focus-border-color, var(--primary-color));\n        outline-offset: -2px;\n        border-radius: var(--default-border-radius);\n      }\n    }\n  }\n\n  &-weekday {\n    font-size: 0.6875em;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-transform: uppercase;\n    color: var(--text-dark);\n  }\n\n  &-dayNumber {\n    display: grid;\n    place-items: center;\n    width: 1.875em;\n    height: 1.875em;\n    border-radius: 50%;\n    font-size: 1.125em;\n    font-weight: 500;\n    font-variant-numeric: tabular-nums;\n    transition: background-color 0.15s ease;\n\n    &-today {\n      background: var(--custom-calendar-today-color);\n      color: var(--text-on-primary);\n      font-weight: 700;\n    }\n  }\n\n  &-allDay {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    grid-auto-rows: var(--lane);\n    row-gap: 2px;\n    min-height: 0.5em;\n    padding: 2px 0 4px;\n\n    /* A lane's height even when empty, so there is something to click to create. */\n    &-creatable {\n      min-height: var(--lane);\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n  }\n\n  &-bar {\n    --event: var(--event-color, var(--primary-color));\n\n    min-width: 0;\n    margin: 0 2px;\n    padding: 0 0.5em;\n    overflow: hidden;\n    border: 0;\n    border-radius: var(--custom-calendar-event-radius);\n    background: color-mix(in oklab, var(--event) 22%, var(--background));\n    box-shadow: inset 3px 0 0 var(--event);\n    color: var(--text-color);\n    font: inherit;\n    font-size: 0.75em;\n    font-weight: 500;\n    text-align: left;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: color-mix(in oklab, var(--event) 32%, var(--background));\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n    }\n\n    &-continuesBefore {\n      margin-left: 0;\n      border-top-left-radius: 0;\n      border-bottom-left-radius: 0;\n      box-shadow: none;\n    }\n\n    &-continuesAfter {\n      margin-right: 0;\n      border-top-right-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    &-title {\n      display: block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    &-dragged {\n      opacity: 0.4;\n    }\n\n    &-preview {\n      background: color-mix(in oklab, var(--event) 32%, var(--background));\n      box-shadow:\n        inset 3px 0 0 var(--event),\n        0 0.25em 0.75em color-mix(in oklab, var(--text-color) 22%, transparent);\n      pointer-events: none;\n    }\n  }\n\n  &-more {\n    align-self: center;\n    margin: 0 2px;\n    padding: 0 0.5em;\n    border-radius: var(--custom-calendar-event-radius);\n    font-size: 0.75em;\n    font-weight: 600;\n    white-space: nowrap;\n    color: var(--text-dark);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n\n    &:hover {\n      background: var(--background-accent-light);\n    }\n  }\n\n  /* Its own stacking context, which keeps everything drawn in the hours under the sticky head\n     above. Inside it, the now-line and the drag preview come after the events in the markup,\n     and so paint over them without a z-index. */\n  &-body {\n    isolation: isolate;\n    display: grid;\n    grid-template-columns: var(--gutter) minmax(0, 1fr);\n    height: calc(24 * var(--custom-calendar-hour-height));\n  }\n\n  &-gutter {\n    position: relative;\n  }\n\n  &-hour {\n    position: absolute;\n    right: 0.625em;\n    font-size: 0.6875em;\n    font-variant-numeric: tabular-nums;\n    white-space: nowrap;\n    color: var(--text-light);\n    transform: translateY(-50%);\n  }\n\n  &-bodyPane {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    height: 100%;\n    background: var(--background);\n  }\n\n  /* Hour lines, and fainter half-hour lines between them. */\n  &-column {\n    /* Events leave a strip on the right free, so there is always somewhere to press to create. */\n    --column-width: calc(100% - 0.75em);\n    --hour-line: linear-gradient(var(--border-color) 1px, transparent 1px);\n    --half-hour-line: linear-gradient(color-mix(in oklab, var(--border-color) 45%, transparent) 1px, transparent 1px);\n\n    position: relative;\n    min-width: 0;\n    border-left: 1px solid var(--border-color);\n    background-image: var(--hour-line), var(--half-hour-line);\n    background-position:\n      0 0,\n      0 calc(var(--custom-calendar-hour-height) / 2);\n    background-size: 100% var(--custom-calendar-hour-height);\n\n    &-today {\n      background-color: color-mix(in oklab, var(--custom-calendar-today-color) 4%, transparent);\n    }\n\n    /* A layer under the hour lines rather than over them, so it can be opaque and still let them\n       show, and over today's tint, which is the background colour. */\n    &-working {\n      --outside: var(--custom-calendar-off-hours-color);\n      --inside: transparent;\n\n      background-image:\n        var(--hour-line), var(--half-hour-line),\n        linear-gradient(\n          var(--outside) var(--work-start),\n          var(--inside) var(--work-start) var(--work-end),\n          var(--outside) var(--work-end)\n        );\n      background-position:\n        0 0,\n        0 calc(var(--custom-calendar-hour-height) / 2),\n        0 0;\n      background-size:\n        100% var(--custom-calendar-hour-height),\n        100% var(--custom-calendar-hour-height),\n        100% 100%;\n\n      /* `--work-start` is the earlier hour, so an overnight shift is the part outside the band. */\n      &-overnight {\n        --outside: transparent;\n        --inside: var(--custom-calendar-off-hours-color);\n      }\n    }\n\n    &-creatable {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n  }\n\n  &-event {\n    --event: var(--event-color, var(--primary-color));\n\n    position: absolute;\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    min-width: 0;\n    height: var(--span);\n    margin: 0;\n    padding: 0.2em 0.45em 0.2em 0.6em;\n    overflow: hidden;\n    container-type: size;\n    border: 0;\n    border-radius: var(--custom-calendar-event-radius);\n    background: color-mix(in oklab, var(--event) 22%, var(--background));\n\n    /* The outline in the page colour keeps side-by-side events apart. */\n    box-shadow:\n      inset 3px 0 0 var(--event),\n      0 0 0 1px var(--background);\n    color: var(--text-color);\n    font: inherit;\n    font-size: 0.75em;\n    line-height: 1.3;\n    text-align: left;\n    transition:\n      background-color 0.15s ease,\n      opacity 0.15s ease;\n\n    &:hover {\n      background: color-mix(in oklab, var(--event) 32%, var(--background));\n    }\n\n    &:focus-visible {\n      z-index: 1;\n      outline: 2px solid var(--focus-border-color, var(--primary-color));\n    }\n\n    &-short {\n      flex-direction: row;\n\n      /* Not `baseline`: a 15-minute event is shorter than its line, and centring clips it evenly\n         rather than cutting off the bottom. Title and time share a font size, so they still line up. */\n      align-items: center;\n      gap: 0.4em;\n      padding-block: 0;\n    }\n\n    /* Too short for its label, which would be clipped to nothing: a bar of its real length, and\n       the label on a line of its own beneath it, in the room packDay leaves for it. */\n    &-brief {\n      /* One line, with room for the descenders that a line height of 1 clips in Firefox. Keep\n         BRIEF_LABEL_MINUTES in layout.ts at least this tall at the default hour height. */\n      --label: 1.25em;\n\n      isolation: isolate;\n      height: calc(var(--span) + var(--label));\n      align-items: flex-end;\n      line-height: var(--label);\n      background: none;\n      box-shadow: none;\n\n      /* Under the label, which it covers once zoomed in: see the @container rule below. */\n      &::before {\n        content: '';\n        position: absolute;\n        z-index: -1;\n        top: 0;\n        right: 0;\n        left: 0;\n        height: max(2px, 100% - var(--label));\n        border-radius: inherit;\n        background: var(--event);\n        transition:\n          background-color 0.15s ease,\n          opacity 0.15s ease;\n      }\n\n      &:hover {\n        background: none;\n\n        &::before {\n          opacity: 0.75;\n        }\n      }\n\n      /* On the bar's end, which is the event's, rather than under the label. */\n      .timeGrid-resize {\n        bottom: calc(var(--label) - 0.3em);\n        height: 0.6em;\n        max-height: none;\n      }\n    }\n\n    &-continuesBefore {\n      border-top-left-radius: 0;\n      border-top-right-radius: 0;\n    }\n\n    &-continuesAfter {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    &-interactive {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    &-dragged {\n      opacity: 0.4;\n    }\n\n    &-title {\n      flex: none;\n      overflow: hidden;\n      font-weight: 600;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    }\n\n    &-time {\n      overflow: hidden;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n      color: var(--text-dark);\n    }\n  }\n\n  &-resize {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 0.625em;\n\n    /* Half at most, so a short event keeps a part that moves it: a finger's grip is taller. */\n    max-height: 50%;\n    cursor: ns-resize;\n\n    /* A visible grip where a finger is the pointer, since there is no hover to reveal it. */\n    @media (pointer: coarse) {\n      height: 1.5em;\n\n      &::after {\n        content: '';\n        position: absolute;\n        bottom: 0.3em;\n        left: 50%;\n        width: 1.5em;\n        height: 0.25em;\n        border-radius: 0.125em;\n        background: color-mix(in oklab, var(--event) 70%, var(--background));\n        translate: -50% 0;\n      }\n    }\n  }\n\n  &-preview {\n    --event: var(--event-color, var(--primary-color));\n\n    position: absolute;\n    left: 0;\n    width: var(--column-width);\n    box-sizing: border-box;\n    display: flex;\n    flex-direction: column;\n    padding: 0.2em 0.45em 0.2em 0.6em;\n    overflow: hidden;\n    border-radius: var(--custom-calendar-event-radius);\n    background: color-mix(in oklab, var(--event) 32%, var(--background));\n    box-shadow:\n      inset 3px 0 0 var(--event),\n      0 0.5em 1.25em color-mix(in oklab, var(--text-color) 22%, transparent);\n    color: var(--text-color);\n    font-size: 0.75em;\n    line-height: 1.3;\n    pointer-events: none;\n\n    &-time {\n      font-weight: 600;\n      font-variant-numeric: tabular-nums;\n      white-space: nowrap;\n    }\n  }\n\n  /* The anchor `onSlotCreate` hands out, moved over each new slot. Transparent rather than\n     hidden, so it keeps the box a popover measures and anchors to. */\n  &-slot {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  &-now {\n    position: absolute;\n    right: 0;\n    left: 0;\n    height: 2px;\n    margin-top: -1px;\n    background: var(--custom-calendar-now-color);\n    pointer-events: none;\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 50%;\n      left: 0;\n      width: 0.625em;\n      height: 0.625em;\n      border-radius: 50%;\n      background: var(--custom-calendar-now-color);\n      translate: -50% -50%;\n      animation: calendarNowPulse 2.4s ease-in-out infinite;\n    }\n  }\n}\n\n/* Zoomed in until its bar holds its label, a brief event is drawn like any other, its label\n   centred in the bar. 2.5em is twice the label's line: a condition cannot read `--label`. */\n@container (height >= 2.5em) {\n  .timeGrid-event-brief::before {\n    background: color-mix(in oklab, var(--event) 22%, var(--background));\n    box-shadow: inset 3px 0 0 var(--event);\n  }\n\n  .timeGrid-event-brief:hover::before {\n    background: color-mix(in oklab, var(--event) 32%, var(--background));\n    opacity: 1;\n  }\n\n  .timeGrid-event-brief .timeGrid-event-title,\n  .timeGrid-event-brief .timeGrid-event-time {\n    align-self: flex-start;\n    margin-top: calc((100cqh - 2 * var(--label)) / 2);\n  }\n}\n\n/* An event shorter than its text shows its colour alone, not a slice of clipped letters. The `em`\n   is the event's own font size, and zooming in brings the text back. */\n@container (height < 0.8em) {\n  .timeGrid-event-title,\n  .timeGrid-event-time {\n    display: none;\n  }\n}\n\n@keyframes calendarNowPulse {\n  50% {\n    box-shadow: 0 0 0 0.3em color-mix(in oklab, var(--custom-calendar-now-color) 25%, transparent);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .timeGrid .timeGrid-toggle {\n    transition: none;\n  }\n\n  .timeGrid-now::before {\n    animation: none;\n  }\n}\n"],"mappings":""}