.MonthViewRow:not(:last-child) {
  border-block-end: 1px solid var(--border-color);
}

.MonthViewWeekNumberCell {
  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);
}

.MonthViewCellNumber,
.MonthViewCellNumberButton {
  grid-row: 1;
  justify-self: end;
}

.MonthViewCellNumberButton {
  width: fit-content;
  align-self: flex-end;
  border-radius: var(--radius-4);
}

/* Hovered */
.MonthViewCellNumberButton:hover {
  background: var(--interactive-hover-bg);
}

/* Active */
.MonthViewCellNumberButton:active {
  background: var(--interactive-active-bg);
}

/* Focused */
.MonthViewCellNumberButton:focus-visible {
  background: var(--interactive-focused-bg);
  outline: var(--outline-focus);
  outline-offset: var(--outline-focus-offset);
}

/* Focused and hovered */
.MonthViewCellNumberButton:focus-visible:hover {
  background: var(--interactive-focused-hover-bg);
}

.MonthViewCell {
  display: grid;
  /* Setting the row heights to 18px here to make sure that even empty rows have the exact height of an all day event */
  grid-template-rows: repeat(var(--row-count), minmax(auto, 18px));
  gap: var(--space-1);
  padding: var(--space-1);
  font-size: var(--font-size-2);
  line-height: var(--line-height-1);
  color: var(--secondary-text-color);
}

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

.MonthViewCell.Weekend {
  background: var(--weekend-background);
  color: var(--primary-text-color);
}

.MonthViewCell[data-current] {
  background-color: var(--primary-2);
}

.MonthViewCell[data-current] .MonthViewCellNumber {
  background: var(--primary-5);
  color: var(--interactive-selected-text);
}

.MonthViewCell.OtherMonth {
  color: var(--disabled-text-color);
}

/* Today (Highlighted) */
.MonthViewCell[data-current] > .MonthViewCellNumberButton > .MonthViewCellNumber,
.MonthViewCell[data-current] > .MonthViewCellNumberButton:hover > .MonthViewCellNumber,
.MonthViewCell[data-current] > .MonthViewCellNumberButton:active > .MonthViewCellNumber {
  background: transparent;
}

.MonthViewCell[data-current] > .MonthViewCellNumberButton {
  background: var(--primary-5);
  color: var(--interactive-selected-text);
}

/* Today and hovered */
.MonthViewCell[data-current] > .MonthViewCellNumberButton:hover {
  background: var(--primary-6);
}

/* Today and active */
.MonthViewCell[data-current] > .MonthViewCellNumberButton:active {
  background: var(--primary-7);
}

.MonthViewCellEvents {
  position: relative;
  display: grid;
  gap: var(--space-1);
}

.MonthViewMoreEvents {
  margin: 0;
  color: var(--secondary-text-color);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  padding-inline-start: var(--space-1);
}

.MonthViewPlaceholderEventContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  /* Setting the row heights to 18px here to make sure that even empty rows have the exact height of an all day event */
  grid-template-rows: repeat(var(--row-count), minmax(auto, 18px));
  gap: var(--space-1);
}