{"version":3,"file":"MobileMonthView.module.mjs","names":[],"sources":["../../../src/components/MobileMonthView/MobileMonthView.module.css"],"sourcesContent":[".mobileMonthView {\n  --mobile-month-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n  --week-numbers-offset: 0rem;\n  --day-base-color: var(--mantine-color-text);\n  --day-dimmed-color: alpha(var(--day-base-color), 0.5);\n\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n\n  @mixin where-light {\n    --mobile-month-view-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --mobile-month-view-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-with-week-numbers]) {\n    --week-numbers-offset: 32px;\n  }\n}\n\n.mobileMonthViewHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: var(--mantine-spacing-sm);\n  border-bottom: 1px solid var(--mobile-month-view-border-color);\n}\n\n.mobileMonthViewHeaderBackButton {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  font-weight: var(--mantine-font-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--mobile-month-view-font-size);\n\n  &:where([data-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.mobileMonthViewHeaderLabel {\n  user-select: none;\n  font-weight: var(--mantine-font-weight-semibold);\n  text-transform: capitalize;\n}\n\n.mobileMonthViewCalendar {\n  --mobile-month-view-font-size: clamp(6px, 3.5cqw, 22px);\n\n  container-type: inline-size;\n  padding: var(--mantine-spacing-sm);\n  border-bottom: 1px solid var(--mobile-month-view-border-color);\n}\n\n.mobileMonthViewWeekdays {\n  display: flex;\n  margin-bottom: var(--mantine-spacing-xs);\n}\n\n.mobileMonthViewWeekdaysCorner {\n  flex: 0 0 var(--week-numbers-offset);\n}\n\n.mobileMonthViewWeekday {\n  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);\n  font-size: var(--mobile-month-view-font-size);\n  font-weight: var(--mantine-font-weight-medium);\n  text-align: center;\n  text-transform: capitalize;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: default;\n  user-select: none;\n  color: var(--day-dimmed-color);\n  padding-block: 4px;\n}\n\n.mobileMonthViewWeek {\n  display: flex;\n}\n\n.mobileMonthViewWeekNumber {\n  flex: 0 0 calc(var(--week-numbers-offset) - rem(4px));\n  margin-inline-end: rem(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mantine-font-size-xs);\n  border-radius: var(--mobile-month-view-radius);\n  padding: 4px;\n  font-weight: var(--mantine-font-weight-medium);\n  cursor: pointer;\n  user-select: none;\n  color: var(--day-dimmed-color);\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  &:where([data-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.mobileMonthViewDay {\n  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);\n  height: 48px;\n  padding: 4px;\n  font-weight: var(--mantine-font-weight-medium);\n  font-size: var(--mobile-month-view-font-size);\n  color: var(--day-base-color);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  z-index: 0;\n\n  &::before {\n    width: 32px;\n    height: 32px;\n    border-radius: 100%;\n    content: '';\n    position: absolute;\n    top: 7px;\n    left: calc(50% - 16px);\n    z-index: -1;\n    pointer-events: none;\n  }\n\n  &:focus {\n    z-index: 1;\n  }\n\n  &:where([data-hidden]) {\n    visibility: hidden;\n    pointer-events: none;\n  }\n\n  &:where([data-weekend]) {\n    color: var(--mantine-color-red-6);\n  }\n\n  &:where([data-outside]) {\n    color: var(--day-dimmed-color);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-6);\n    }\n  }\n\n  &:where([data-today]:not([data-selected])) {\n    @mixin where-light {\n      &::before {\n        background-color: var(--mantine-color-gray-2);\n      }\n    }\n\n    @mixin where-dark {\n      &::before {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-selected]) {\n    color: var(--mantine-primary-color-contrast);\n\n    &::before {\n      background-color: var(--mantine-primary-color-filled);\n    }\n\n    @mixin hover {\n      &::before {\n        background-color: var(--mantine-primary-color-filled-hover);\n      }\n    }\n  }\n\n  &:where([data-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.mobileMonthViewDayIndicators {\n  position: absolute;\n  bottom: 2px;\n  inset-inline: 0;\n  display: flex;\n  justify-content: center;\n  padding-inline-start: 2px;\n}\n\n.mobileMonthViewDayIndicator {\n  width: 5px;\n  height: 5px;\n  border-radius: 100%;\n  margin-inline-start: -1px;\n}\n\n.mobileMonthViewEventsList {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  padding: var(--mantine-spacing-sm);\n}\n\n.mobileMonthViewEventsHeader {\n  margin-bottom: var(--mantine-spacing-sm);\n  font-weight: var(--mantine-font-weight-semibold);\n  text-transform: capitalize;\n}\n\n.mobileMonthViewEvent {\n  display: block;\n  width: 100%;\n  text-align: start;\n  cursor: pointer;\n\n  &:where(:not(:last-child)) {\n    border-bottom: 1px solid var(--mobile-month-view-border-color);\n  }\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-6);\n    }\n  }\n}\n\n.mobileMonthViewEventBody {\n  display: flex;\n  gap: var(--mantine-spacing-sm);\n  padding: var(--mantine-spacing-xs) 0;\n}\n\n.mobileMonthViewEventColor {\n  width: 4px;\n  border-radius: 2px;\n  flex-shrink: 0;\n}\n\n.mobileMonthViewEventTime {\n  margin-top: 2px;\n  font-size: var(--mantine-font-size-xs);\n  color: var(--mantine-color-dimmed);\n}\n\n.mobileMonthViewNoEvents {\n  color: var(--mantine-color-dimmed);\n  text-align: center;\n  padding-block: var(--mantine-spacing-xl);\n}\n"],"mappings":""}