/* stylelint-disable keyframes-name-pattern */
@use '@angular/material' as mat;
@use '../core/tokens/token-utils';
@use './m3-datetimepicker';

$fallbacks: m3-datetimepicker.get-tokens();

$calendar-padding: 8px;
$non-touch-calendar-cell-size: 40px;
$non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
$non-touch-calendar-portrait-height: 424px;
$non-touch-calendar-landscape-width: 440px;
$non-touch-calendar-landscape-height: 328px;
$non-touch-calendar-with-time-input-portrait-height: 442px;
$non-touch-calendar-with-time-input-actions-portrait-height: 494px;
$non-touch-calendar-with-time-input-landscape-height: 356px;
$non-touch-calendar-with-time-input-actions-landscape-height: 416px;

// 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.
$touch-landscape-mode-landscape-width: 120vh;
$touch-landscape-mode-landscape-height: 80vh;
$touch-landscape-mode-portrait-width: 90vw;
$touch-landscape-mode-portrait-height: 64vw;
$touch-portrait-mode-landscape-width: 64vh;
$touch-portrait-mode-landscape-height: 80vh;
$touch-portrait-mode-portrait-width: 80vw;
$touch-portrait-mode-portrait-height: 120vw;
$touch-portrait-mode-portrait-height-with-actions: 124vw;
$touch-min-width: 250px;
$touch-min-height: 300px;
$touch-max-width: 750px;
$touch-max-height: 850px;

@keyframes _mtx-datetimepicker-content-dropdown-enter {
  from {
    opacity: 0;
    transform: scaleY(0.8);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes _mtx-datetimepicker-content-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes _mtx-datetimepicker-content-exit {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@mixin landscape-calendar-size {
  .mtx-calendar {
    width: $non-touch-calendar-landscape-width;
    height: $non-touch-calendar-landscape-height;

    &.mtx-calendar-with-time-input {
      height: $non-touch-calendar-with-time-input-actions-landscape-height;
    }
  }

  .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
    height: $non-touch-calendar-with-time-input-landscape-height;
  }
}

.mtx-datetimepicker-content {
  display: block;
  border-radius: token-utils.slot(datetimepicker-container-shape, $fallbacks);
  background-color: token-utils.slot(datetimepicker-container-background-color, $fallbacks);
  box-shadow: token-utils.slot(datetimepicker-container-elevation-shadow, $fallbacks);
  color: token-utils.slot(datetimepicker-container-text-color, $fallbacks);

  &.mtx-datetimepicker-content-animations-enabled {
    animation: _mtx-datetimepicker-content-dropdown-enter 120ms cubic-bezier(0, 0, 0.2, 1);
  }

  .mtx-calendar {
    width: $non-touch-calendar-portrait-width;
    height: $non-touch-calendar-portrait-height;

    &.mtx-calendar-with-time-input {
      height: $non-touch-calendar-with-time-input-actions-portrait-height;
    }
  }

  .mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
    height: $non-touch-calendar-with-time-input-portrait-height;
  }

  // Note that this selector doesn't technically have to be nested, but we want the slightly
  // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
  .mtx-datetimepicker-close-button {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 8px;

    // Hide the button while the overlay is animating, because it's rendered
    // outside of it and it seems to cause scrollbars in some cases (see #21493).
    .mtx-datetimepicker-content-animating & {
      display: none;
    }
  }
}

.mtx-datetimepicker-content-container {
  display: flex;
  flex-direction: column;

  // TODO: Ensures that `mtx-datetimepicker-actions` is pushed to the bottom of the popup.
  justify-content: space-between;
}

.mtx-datetimepicker-content[mode='landscape'] {
  @include landscape-calendar-size;
}

@media all and (orientation: landscape) {
  .mtx-datetimepicker-content[mode='auto'] {
    @include landscape-calendar-size;
  }
}

.mtx-datetimepicker-content-touch {
  display: block;
  max-height: 84vh;
  box-shadow: token-utils.slot(datetimepicker-container-touch-elevation-shadow, $fallbacks);
  border-radius: token-utils.slot(datetimepicker-container-touch-shape, $fallbacks);

  // Allows for the screen reader close button to be seen in touch UI mode.
  position: relative;

  // Prevents the content from jumping around on Windows while the animation is running.
  overflow: visible;

  &.mtx-datetimepicker-content-animations-enabled {
    animation: _mtx-datetimepicker-content-dialog-enter 150ms cubic-bezier(0, 0, 0.2, 1);
  }

  .mtx-datetimepicker-content-container {
    min-height: $touch-min-height;
    max-height: $touch-max-height;
    min-width: $touch-min-width;
    max-width: $touch-max-width;
  }

  .mtx-calendar {
    width: 100%;
    height: auto;
  }

  .mtx-clock {
    width: 50vh;
    max-width: 80%;
    margin: 12px auto;
  }
}

.mtx-datetimepicker-content-exit.mtx-datetimepicker-content-animations-enabled {
  animation: _mtx-datetimepicker-content-exit 100ms linear;
}

@media all and (orientation: landscape) {
  .mtx-datetimepicker-content-touch {
    .mtx-datetimepicker-content-container[mode='auto'],
    .mtx-datetimepicker-content-container[mode='landscape'] {
      width: $touch-landscape-mode-landscape-width;
      height: $touch-landscape-mode-landscape-height;

      .mtx-calendar,
      &.mtx-datetimepicker-content-container-with-actions .mtx-calendar.mtx-calendar-with-time-input {
        width: auto;
        height: 100%;
      }
    }

    .mtx-datetimepicker-content-container[mode='portrait'] {
      width: $touch-portrait-mode-landscape-width;
      height: $touch-portrait-mode-landscape-height;

      .mtx-calendar {
        width: 100%;
        height: auto;
      }
    }
  }
}

@media all and (orientation: portrait) {
  .mtx-datetimepicker-content-touch {
    .mtx-datetimepicker-content-container[mode='auto'],
    .mtx-datetimepicker-content-container[mode='portrait'] {
      width: $touch-portrait-mode-portrait-width;
      height: $touch-portrait-mode-portrait-height;

      .mtx-calendar {
        width: 100%;
        height: auto;
      }

      // The content needs to be a bit taller when actions have
      // been projected so that it doesn't have to scroll.
      &.mtx-datetimepicker-content-container-with-actions,
      &.mtx-datetimepicker-content-container-with-time-input {
        height: $touch-portrait-mode-portrait-height-with-actions;
      }
    }

    .mtx-datetimepicker-content-container[mode='landscape'] {
      width: $touch-landscape-mode-portrait-width;
      height: $touch-landscape-mode-portrait-height;

      .mtx-calendar {
        width: auto;
        height: 100%;
      }
    }
  }
}