.grid {
  --grapes-size-col-day: var(--grapes-unit-40);
  display: grid;
  grid-template-columns: repeat(7, var(--grapes-size-col-day));
  grid-template-rows: repeat(6, var(--grapes-size-col-day));
  text-align: center;
}

.header {
  font: var(--grapes-title-m);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--grapes-unit-16);
  color: var(--grapes-color-content-primary);
  text-transform: capitalize;
}

.month {
  margin: 0;
}
.weekday {
  font: var(--grapes-body-s);
  margin: 0;
  color: var(--grapes-color-content-secondary-bg-primary);
  text-transform: capitalize;
  padding-bottom: var(--grapes-unit-8);
}

.day {
  font: var(--grapes-body-m);
  color: var(--grapes-color-content-primary);
  background: none;
  border: none;
  cursor: pointer;
  min-height: var(--grapes-unit-32); /* For Safari < 15 */
  margin: var(--grapes-unit-4);
  aspect-ratio: 1;
  padding: 0;
  outline: none;
  border-radius: var(--grapes-border-radius-4);

  &:not(.selected):hover {
    color: var(--grapes-color-content-selected);
    background-color: var(--grapes-color-background-primary-hover);
  }

  &:not(.selected):focus-visible {
    outline: var(--grapes-focus-ring);
  }

  &:disabled {
    pointer-events: none;
    margin: 0;
    color: var(--grapes-color-content-secondary-bg-secondary);
    -webkit-text-fill-color: var(--grapes-color-content-secondary-bg-secondary);
    background-color: var(--grapes-color-background-primary-disabled);
    border-radius: 0;
  }
}

.selected {
  color: var(--grapes-color-content-complementary);
  background-color: var(--grapes-color-background-primary-brand-default);
}