{"version":3,"file":"monthView.module.mjs","names":[],"sources":["../../../../../../package/common/calendar/components/monthView/monthView.module.pcss"],"sourcesContent":[".monthView {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-height: 0;\n  user-select: none;\n  -webkit-touch-callout: none;\n\n  /* Horizontal swipes page the month; vertical ones still scroll the page. */\n  touch-action: pan-y;\n\n  &-grid {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n    min-height: 0;\n  }\n\n  &-weekdays {\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    border-bottom: 1px solid var(--border-color);\n  }\n\n  &-weekday {\n    padding: 0.5em 0.625em;\n    overflow: hidden;\n    font-size: 0.6875em;\n    font-weight: 600;\n    letter-spacing: 0.06em;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n    white-space: nowrap;\n    color: var(--text-dark);\n  }\n\n  &-viewport {\n    flex: 1;\n    min-height: 0;\n  }\n\n  /* Six equal rows whatever the month, so every pane has the same height while swiping and a\n     row never grows to fit its events: that is what the `+N` buttons are for. */\n  &-pane {\n    display: grid;\n    grid-template-rows: repeat(6, minmax(0, 1fr));\n    background: var(--background);\n  }\n\n  &-week {\n    position: relative;\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    min-height: 0;\n\n    & + & {\n      border-top: 1px solid var(--border-color);\n    }\n  }\n\n  &-cell {\n    position: relative;\n    min-width: 0;\n    padding: 0.25em;\n    outline: none;\n\n    & + & {\n      border-left: 1px solid var(--border-color);\n    }\n\n    &:focus-visible {\n      box-shadow: inset 0 0 0 2px var(--focus-border-color, var(--primary-color));\n    }\n\n    &-outside {\n      background: color-mix(in oklab, var(--background-accent) 40%, transparent);\n      color: var(--text-light);\n    }\n\n    &-creatable {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &:hover {\n        background: color-mix(in oklab, var(--primary-color) 5%, transparent);\n      }\n    }\n\n    &-target {\n      background: color-mix(in oklab, var(--primary-color) 14%, transparent);\n    }\n  }\n\n  &-dayNumber {\n    display: inline-grid;\n    place-items: center;\n    min-width: 1.75em;\n    height: 1.75em;\n    padding: 0 0.25em;\n    border-radius: 0.875em;\n    font-size: 0.8125em;\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    &-link {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n\n      &:not(.monthView-dayNumber-today):hover {\n        background: var(--background-accent);\n      }\n    }\n  }\n\n  /* Top right of the row's first cell, in the band above the bars and level with the day number:\n     the cell's 0.25em padding and the number's 1.75em at 0.8125em, in this label's 0.6875em. */\n  &-weekNumber {\n    position: absolute;\n    top: calc(0.25em / 0.6875);\n    right: 0.5em;\n\n    /* Clear of the day number, in a narrow cell or a long translation. */\n    max-width: calc(100% - 3.5em);\n    overflow: hidden;\n    font-size: 0.6875em;\n    font-weight: 600;\n    line-height: calc(1.75em * 0.8125 / 0.6875);\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    color: var(--text-light);\n  }\n\n  /* Laid over the week's cells and starting below the day numbers. Its `grid-auto-rows`,\n     `row-gap` and `padding-top` are read back to work out how many lanes fit, so change them\n     here rather than overriding them on a bar. */\n  &-bars {\n    position: absolute;\n    inset: 0;\n    display: grid;\n    grid-template-columns: repeat(var(--days), minmax(0, 1fr));\n    grid-auto-rows: 1.375em;\n    row-gap: 2px;\n    align-content: start;\n    padding-top: 1.75em;\n    overflow: hidden;\n    pointer-events: none;\n  }\n\n  &-bar {\n    --event: var(--event-color, var(--primary-color));\n\n    display: flex;\n    align-items: center;\n    gap: 0.3em;\n    min-width: 0;\n    margin: 0 0.25em;\n    padding: 0 0.4em;\n    overflow: hidden;\n    border-radius: var(--custom-calendar-event-radius);\n    font-size: 0.75em;\n    white-space: nowrap;\n    pointer-events: auto;\n    transition:\n      background-color 0.15s ease,\n      opacity 0.15s ease;\n\n    &-filled {\n      background: color-mix(in oklab, var(--event) 22%, var(--background));\n      box-shadow: inset 3px 0 0 var(--event);\n      font-weight: 500;\n\n      &:hover {\n        background: color-mix(in oklab, var(--event) 32%, var(--background));\n      }\n    }\n\n    &-timed:hover {\n      background: color-mix(in oklab, var(--event) 12%, transparent);\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    &-interactive {\n      cursor: pointer;\n      -webkit-tap-highlight-color: transparent;\n    }\n\n    &-dragging {\n      opacity: 0.45;\n    }\n\n    &-title {\n      min-width: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  }\n\n  &-dot {\n    flex: none;\n    width: 0.5em;\n    height: 0.5em;\n    border-radius: 50%;\n    background: var(--event);\n  }\n\n  &-time {\n    flex: none;\n    font-variant-numeric: tabular-nums;\n    color: var(--text-dark);\n  }\n\n  &-more {\n    align-self: center;\n    margin: 0 0.25em;\n    padding: 0 0.4em;\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    pointer-events: auto;\n\n    &:hover {\n      background: var(--background-accent-light);\n    }\n  }\n\n  &-list {\n    display: flex;\n    flex-direction: column;\n    gap: 0.25em;\n    width: 18em;\n    max-width: 100%;\n\n    &-title {\n      padding: 0.25em 0.625em;\n      font-size: 0.8125em;\n      font-weight: 600;\n      color: var(--text-dark);\n    }\n\n    /* Scrolls inside the popover rather than growing it past the screen. */\n    &-events {\n      max-height: 18em;\n    }\n\n    &-create {\n      align-self: flex-start;\n      margin: 0.25em 0.625em 0.125em;\n    }\n  }\n}\n"],"mappings":""}