@define refs {
  name: tedirLayoutCalendar;
}

@alga {refs.name} {
  .calendar {
    ref: display-grid width-auto;
    ref-fontFamily: Arial, sans-serif;
  }
  
  .calendar:not(.hasWeek) {
    ref-gridTemplateAreas: "dayGrid" "monthGrid" "monthGrid";
    ref-gridTemplateColumns: 1fr;
  }

  .calendar.hasWeek {
    ref-gridTemplateAreas: "weekGrid dayGrid" "weekGrid monthGrid" "weekGrid monthGrid";
    ref-gridTemplateColumns: auto 1fr;
  }

  .calendarDay {
    ref-gridArea: dayGrid;
  }

  .calendarMonth {
    ref-gridArea: monthGrid;
  }

  .calendarWeek {
    ref-gridArea: weekGrid;
  }
}