{"version":3,"file":"YearView.module.mjs","names":[],"sources":["../../../src/components/YearView/YearView.module.css"],"sourcesContent":[".yearView {\n  --year-view-radius: var(--schedule-radius, var(--mantine-radius-default));\n  --year-view-font-size: var(--mantine-font-size-sm);\n  container-type: inline-size;\n\n  @mixin where-light {\n    --year-view-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --year-view-border-color: var(--mantine-color-dark-4);\n  }\n}\n\n.yearViewMonths {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n\n  @container (width <= 850px) {\n    --year-view-font-size: calc(var(--mantine-font-size-sm) - 2px);\n  }\n\n  @container (width <= 750px) {\n    grid-template-columns: repeat(2, 1fr);\n    --year-view-font-size: var(--mantine-font-size-xs);\n  }\n\n  @container (width <= 520px) {\n    --year-view-font-size: calc(var(--mantine-font-size-xs) - 2px);\n  }\n\n  @container (width <= 420px) {\n    grid-template-columns: 1fr;\n    --year-view-font-size: var(--mantine-font-size-xs);\n  }\n}\n\n.yearViewMonth {\n  --week-numbers-offset: 0rem;\n  --day-base-color: var(--mantine-color-text);\n  --day-dimmed-color: alpha(var(--day-base-color), 0.35);\n\n  &:where([data-with-week-numbers]) {\n    --week-numbers-offset: 28px;\n  }\n\n  min-width: 0;\n  border: 1px solid var(--year-view-border-color);\n  padding: var(--mantine-spacing-md);\n  margin-top: -1px;\n  margin-inline-start: -1px;\n\n  &:where(:nth-child(3n + 1)) {\n    margin-inline-start: 0;\n  }\n\n  &:where(:nth-child(-n + 3)) {\n    margin-top: 0;\n  }\n\n  &:where(:nth-child(1)) {\n    border-start-start-radius: var(--year-view-radius);\n  }\n\n  &:where(:nth-child(3)) {\n    border-start-end-radius: var(--year-view-radius);\n  }\n\n  &:where(:nth-last-child(3)) {\n    border-end-start-radius: var(--year-view-radius);\n  }\n\n  &:where(:nth-last-child(1)) {\n    border-end-end-radius: var(--year-view-radius);\n  }\n\n  @container (width <= 750px) {\n    border: 0;\n    padding: 8px;\n    margin: 0;\n\n    &:where([data-with-week-numbers]) {\n      --week-numbers-offset: 14px;\n    }\n  }\n\n  @container (width <= 420px) {\n    padding: 6px;\n  }\n}\n\n.yearViewWeekdays {\n  display: flex;\n}\n\n.yearViewWeek {\n  display: flex;\n}\n\n.yearViewWeekNumber {\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(--year-view-font-size);\n  border-radius: var(--year-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  @container (width <= 750px) {\n    padding: 0;\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-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.yearViewWeekday {\n  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);\n  height: 36px;\n  font-size: var(--year-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\n  @container (width <= 750px) {\n    height: auto;\n    padding-block: 2px;\n  }\n}\n\n.yearViewWeekdaysCorner {\n  flex: 0 0 var(--week-numbers-offset);\n}\n\n.yearViewDay {\n  flex: 0 0 calc(100% / 7 - var(--week-numbers-offset) / 7);\n  padding: 4px;\n  font-size: var(--year-view-font-size);\n  color: var(--day-base-color);\n  cursor: pointer;\n  user-select: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 100%;\n  aspect-ratio: 1;\n  position: relative;\n\n  @container (width <= 750px) {\n    padding: 0;\n  }\n\n  &:where([data-day-placeholder]) {\n    background-color: transparent;\n    cursor: default;\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    &:where(:not([data-today], [data-day-placeholder])) {\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  &:where([data-today]:not([data-outside])) {\n    background-color: var(--mantine-primary-color-filled);\n    color: var(--mantine-primary-color-contrast);\n\n    @mixin hover {\n      background-color: var(--mantine-primary-color-filled-hover);\n    }\n  }\n\n  &:where([data-static]) {\n    cursor: default;\n    pointer-events: none;\n  }\n}\n\n.yearViewMonthCaption {\n  padding-inline: var(--mantine-spacing-sm);\n  width: 100%;\n  padding-block: 4px;\n  margin-bottom: 4px;\n  font-size: var(--year-view-font-size);\n  font-weight: var(--mantine-font-weight-medium);\n  text-transform: capitalize;\n  border-radius: var(--year-view-radius);\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.yearViewDayIndicators {\n  position: absolute;\n  bottom: 0;\n  inset-inline: 0;\n  display: flex;\n  justify-content: center;\n  padding-inline-start: 2px;\n}\n\n.yearViewDayIndicator {\n  width: 8px;\n  height: 8px;\n  border-radius: 100%;\n  margin-inline-start: -2px;\n  border: 1px solid var(--mantine-color-body);\n}\n"],"mappings":""}