.container {
  position: relative;
}

.calendar {
  position: absolute;
  margin: 0;
  padding: var(--grapes-unit-24);
  width: 328px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-property: opacity, transform;
  transition-duration: var(--grapes-transition-duration);
  transition-timing-function: var(--grapes-transition-timing-function);

  &[data-closing='true'] {
    animation: var(--grapes-transition-duration) datePickerOut
      var(--grapes-transition-timing-function) forwards;
  }
}

@starting-style {
  .calendar {
    opacity: 0;
    transform: translateY(calc(-1 * var(--grapes-unit-16)));
  }
}

@keyframes datePickerOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(calc(-1 * var(--grapes-unit-16)));
  }
}