:host {
  display: block;
}

:host(.show-weeks) > .calendar-month {
  grid-template-areas: "no weekdays" "weeks days";
  grid-template-columns: 1fr 7fr;
}

:host(:not(.show-weeks)) > .calendar-month > .no,
:host(:not(.show-weeks)) > .calendar-month > .weeks {
  display: none;
}

.calendar-month {
  display: grid;
  grid-row-gap: 10px;
  grid-template-areas: "weekdays" "days";
  grid-template-columns: 1fr;
  min-height: 200px;
}

.calendar-month > .weekdays {
  display: grid;
  grid-area: weekdays;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.calendar-month > .no {
  color: var(--color-line);
  text-align: center;
}

.calendar-month > .weeks {
  color: var(--color-text-shy);
  grid-area: weeks;
}

.calendar-month > .weeks,
.calendar-month > .days {
  display: grid;
  grid-row-gap: 6px;
}

.calendar-month > .weeks > .week,
.calendar-month > .days > .day {
  align-items: center;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  text-align: center;
}

.calendar-month > .days {
  grid-area: days;
  grid-auto-flow: row;
  grid-template-columns: repeat(7, 1fr);
  width: 100%;
}

.calendar-month > .days > .day.-previous,
.calendar-month > .days > .day.-next {
  color: var(--color-text-shy);
}

.calendar-month > .days > .day.-today {
  background-color: var(--color-brand);
  background-image: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1));
  border-radius: 50%;
  color: var(--palette-white);
}