$oui-datepicker-calendar-padding: 8px;
$oui-datepicker-non-touch-calendar-cell-size: 40px;
$oui-datepicker-non-touch-calendar-width: $oui-datepicker-non-touch-calendar-cell-size *
  7 + $oui-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).
$oui-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.
$oui-datepicker-touch-landscape-width: 64vh;
$oui-datepicker-touch-landscape-height: 80vh;
$oui-datepicker-touch-portrait-width: 80vw;
$oui-datepicker-touch-portrait-height: 100vw;
$oui-datepicker-touch-min-width: 250px;
$oui-datepicker-touch-min-height: 312px;
$oui-datepicker-touch-max-width: 750px;
$oui-datepicker-touch-max-height: 788px;

.oui-datepicker-content {
  display: block;
  background-color: #ffffff;
  color: #000;
  box-shadow: 0px 1px 3px 0px #4a4a4a;
  border: 1px solid #c8c8c8;
  .oui-calendar {
    width: $oui-datepicker-non-touch-calendar-width;
    height: $oui-datepicker-non-touch-calendar-height;
  }
}

.oui-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;

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

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

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