.MonthViewContainer {
  --fixed-cell-width: 28px;
  --grid-template-columns-month-view: repeat(auto-fit, minmax(0, 1fr));

  width: 100%;
  border-radius: var(--radius-4);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.MonthViewRoot {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.MonthViewHeader {
  border-block-end: 1px solid var(--border-color);
}

.MonthViewRowGrid {
  display: grid;
  grid-template-columns: var(--grid-template-columns-month-view);
}

.MonthViewRowGrid.WithWeekNumber {
  grid-template-columns: var(--fixed-cell-width) var(--grid-template-columns-month-view);
}

.MonthViewHeaderCell {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--font-size-2);
  line-height: var(--line-height-1);
}

.MonthViewHeaderCell:not(:first-child) {
  border-inline-start: 1px solid var(--border-color);
}

.MonthViewWeekHeaderCell {
  padding: var(--space-2) 0;
  text-align: center;
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  color: var(--secondary-text-color);
  font-style: var(--em-font-style);
}

.MonthViewBody {
  flex: 1;
  display: grid;
  grid-auto-rows: 1fr;
  max-height: 100%;
}

.MonthViewCellNumber {
  align-self: end;
  padding: 0 var(--space-1);
  border-radius: var(--radius-4);
}