/* LIVE Rosenau */

.calender {
  row-gap: calc(2 + var(--gap)); 
}
/* months */
.calendar .month {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
}
.calendar p {
  position: sticky;
  left: 0;
  top: 0;
  align-self: start;
  margin: 0;
}
/* days */
.calendar .days {
  display: flex;
  gap: 2px;
}
.calendar .days li {
  --color-fill:  var(--color-primary--muted);
  --color-on: var(--color-base);
  --display: block;
  background: var(--color-fill);
  /*flex-flow: row nowrap;*/  
  color: var(--color-on);
  display: var(--display);
  padding: calc(0.5 * var(--padding));
}
.calendar .days li span:first-child/*,
.calendar .days li span:last-child*/ {
  display: none;
}
.calendar .days li[data-state="empty"]{
  --display: none;
}
.calendar .days li[data-state="full"]{
  --color-fill: var(--color-primary);
  --color-on: var(--color-light);
}
@media screen and (min-width: 25em) {
  .calendar .days li span:first-child {
    display: inline-block;
  }
  .calendar .days li span:last-child:after {
    content: ".";
  }
}
@media screen and (min-width: 48em) {
  .calendar .days li[data-state="empty"]{
    --display: block;
  }
  .calendar .days li[data-state="empty"] span:first-child {
    display: none;
  }
}
@media screen and (min-width: 70em) and (min-height: 60em){
  .calendar .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    width: max-content;
  }
  .calendar .days li span:first-child {
    display: none;
  }
}