@import 'src/global/styles/var';

.glue-calendar {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: @calendar-background-color;

  &__popup {
    &.glue-popup--top,
    &.glue-popup--bottom {
      height: @calendar-popup-height;
    }

    &.glue-popup--left,
    &.glue-popup--right {
      height: 100%;
    }

    .glue-popup__close-icon {
      top: 11px;
    }
  }

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

  &__month-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    color: @calendar-month-mark-color;
    font-size: @calendar-month-mark-font-size;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  &__footer {
    flex-shrink: 0;
    padding: 0 @padding-md;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    &--unfit {
      padding-bottom: 0;
    }
  }

  &__confirm {
    height: @calendar-confirm-button-height;
    margin: @calendar-confirm-button-margin;
  }
}
