@import '../common/style/var';

.van-calendar {
  display: flex;
  flex-direction: column;
  height: var(--calendar-height, @calendar-height);
  background-color: var(
    --calendar-background-color,
    @calendar-background-color
  );

  &__close-icon {
    top: 11px;
  }

  &__popup--top,
  &__popup--bottom {
    height: var(--calendar-popup-height, @calendar-popup-height);
  }

  &__popup--left,
  &__popup--right {
    height: 100%;
  }

  &__body {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  &__footer {
    flex-shrink: 0;
    padding: 0 var(--padding-md, @padding-md);

    &--safe-area-inset-bottom {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
  }

  &__footer:empty,
  &__footer + &__footer {
    display: none;
  }

  &__footer:empty + &__footer {
    display: block !important;
  }

  &__confirm {
    height: var(
      --calendar-confirm-button-height,
      @calendar-confirm-button-height
    ) !important;
    margin: var(
      --calendar-confirm-button-margin,
      @calendar-confirm-button-margin
    ) !important;
    line-height: var(
      --calendar-confirm-button-line-height,
      @calendar-confirm-button-line-height
    ) !important;
  }
}