$mat-datepicker-calendar-padding: 8px;
$mat-datepicker-non-touch-calendar-cell-size: 40px;
$mat-datepicker-non-touch-calendar-width:
    $mat-datepicker-non-touch-calendar-cell-size * 7 + $mat-datepicker-calendar-padding * 2;
// Based on the natural height of the calendar in a month with 6 rows of dates
// (largest the calendar will get).
$mat-datepicker-non-touch-calendar-height: 354px;

// Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
// these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
// the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
// chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
// scrollbars at smaller sizes.
$mat-datepicker-touch-landscape-width: 64vh;
$mat-datepicker-touch-landscape-height: 80vh;
$mat-datepicker-touch-portrait-width: 80vw;
$mat-datepicker-touch-portrait-height: 100vw;
$mat-datepicker-touch-min-width: 250px;
$mat-datepicker-touch-min-height: 312px;
$mat-datepicker-touch-max-width: 750px;
$mat-datepicker-touch-max-height: 788px;


.mat-datepicker-content {
  display: block;
  border-radius: 4px;

  .mat-calendar {
    width: $mat-datepicker-non-touch-calendar-width;
    height: $mat-datepicker-non-touch-calendar-height;
  }
}

.mat-datepicker-content-touch {
  display: block;
  // make sure the dialog scrolls rather than being cropped on ludicrously small screens
  max-height: 80vh;
  overflow: auto;

  // TODO(mmalerba): hack to offset the padding of the dialog. Can be removed when we switch away
  // from using dialog.
  margin: -24px;

  .mat-calendar {
    min-width: $mat-datepicker-touch-min-width;
    min-height: $mat-datepicker-touch-min-height;
    max-width: $mat-datepicker-touch-max-width;
    max-height: $mat-datepicker-touch-max-height;
  }
}

@media all and (orientation: landscape) {
  .mat-datepicker-content-touch .mat-calendar {
    width: $mat-datepicker-touch-landscape-width;
    height: $mat-datepicker-touch-landscape-height;
  }
}

@media all and (orientation: portrait) {
  .mat-datepicker-content-touch .mat-calendar {
    width: $mat-datepicker-touch-portrait-width;
    height: $mat-datepicker-touch-portrait-height;
  }
}