styles.css

.calendar-container {
  width: 100%;
  display: grid;
  gap: clamp(1em, 5vw, 5em);
}

.calendar-nav {
  display: flex;
  /* display: grid;
  grid-template-columns: 1fr 100%; */
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(1.7em, 2vw, 2em);
}

.calendar-body {
  display: grid;
  width: 100%;
  padding-left: 1px;
  padding-bottom: 1em;
  overflow-x: scroll; /* Calendar just won't fit for mobile, so adding a scroll allows users use of the calendar that gets hidden */
}

@media (hover: hover) {
  /* If device can hover, we'll hide the ugly scrollbar until the calendar is being hovered over */
  .calendar-body {
    overflow-x: hidden;
  }
  .calendar-body:hover {
    overflow-x: scroll;
  }
}

h3.calendar-current-month {
  font-size: 23px;
  white-space: nowrap;
  flex: 10;
}

@media (min-width: 480px) {
  h3.calendar-current-month {
    font-size: var(--fontSizeh2);
  }
}

.calendar-button-container {
  display: flex;
  flex-wrap: nowrap;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
}

@media (max-width: 580px) {
  .calendar-nav {
    display: grid;
    width: 100%;
    justify-content: stretch;
  }
}

/*  Body section */
.calendar-weekdays-names,
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-weekdays {
  min-height: clamp(300px, 10vw, 450px);
}

.weekday-name {
  color: var(--colorBlue);
  padding: clamp(0.1em, 2vw, 1em) clamp(0.1em, 2vw, 1em) 1em;
  /* text-transform: uppercase;
  letter-spacing: 4px; */
  /* font-weight: 700; */
  font-size: clamp(0.6em, 3vw, 0.8em);
}

.calendar-day-container {
  /* background: rgba(var(--colorBlueRaw), .05); */
  border: 1px solid var(--colorGrey50l);
  padding: clamp(0.1em, 1.2vw, 0.8em);
  margin: -1px 0 0 -1px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 0.5em;
  min-width: 10ch;
  min-height: clamp(7ch, 11vw, 10ch);
}

.calendar-day-container:not(.month-day):not(.current-day) {
  background: rgba(174, 196, 213, 0.2);
  color: var(--colorGrey50l);
}

.calendar-day-container:hover:not(.current-day) {
  background: var(--colorLightBlue50l);
}

.current-day {
  background: var(--colorBlue);
}

.calendar-date {
  color: var(--colorRoyalBlue);
  font-size: clamp(0.8em, 3vw, 1.2em);
  line-height: 1;
}

.current-day .calendar-date {
  color: var(--colorLight);
}

.calendar-day-container:not(.month-day):not(.current-day) .calendar-date {
  color: var(--colorGrey25l);
}

.calendar-day-container:not(.month-day):not(.current-day) .calendar-tags {
  opacity: 0.6;
  filter: brightness(0.9);
  -webkit-filter: brightness(0.9);
}

.calendar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
}

.current-day .calendar-link {
  border-left: 4px solid var(--colorBlue25l);
}

.calendar-link {
  font-size: clamp(0.6em, 1vw, 0.7em);
  padding: 0.5em 0.6em;
  position: relative;
  background: var(--calendarLinkBgColor);
  border-radius: 4px;
  line-height: clamp(12px, 1.2vw, 14px);
  /* color: var(--colorRoyalBluse); */
  cursor: pointer;
  color: var(--colorRoyalBlue);
  border-left: 4px solid var(--calendarLinkColor);
  z-index: 3;
}

.today {
  font-size: clamp(1em, 3vw, 1.125em);
  color: var(--colorBlue);
  transition: color 0.25s ease-in;
  -webkit-transition: color 0.25s ease-in;
  -moz-transition: color 0.25s ease-in;
  -ms-transition: color 0.25s ease-in;
  -o-transition: color 0.25s ease-in;
}

.today:hover {
  color: var(--colorOrange);
}

.action-button {
  height: 30px;
  width: 30px;
}

.action-button:hover svg path {
  fill: var(--colorOrange);
}

.action-button:hover svg path + path {
  stroke: var(--colorLight);
}