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

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

  &__month-title {
    text-align: center;
    height: var(--calendar-header-title-height, @calendar-header-title-height);
    font-weight: var(--font-weight-bold, @font-weight-bold);
    font-size: var(
      --calendar-month-title-font-size,
      @calendar-month-title-font-size
    );
    line-height: var(
      --calendar-header-title-height,
      @calendar-header-title-height
    );
  }

  &__days {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    user-select: none;
  }

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

  &__day,
  &__selected-day {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  &__day {
    position: relative;
    width: 14.285%;
    height: var(--calendar-day-height, @calendar-day-height);
    font-size: var(--calendar-day-font-size, @calendar-day-font-size);

    &--end,
    &--start,
    &--start-end,
    &--multiple-middle,
    &--multiple-selected {
      color: var(--calendar-range-edge-color, @calendar-range-edge-color);
      background-color: var(
        --calendar-range-edge-background-color,
        @calendar-range-edge-background-color
      );
    }

    &--start {
      border-radius: @border-radius-md 0 0 @border-radius-md;
    }

    &--end {
      border-radius: 0 @border-radius-md @border-radius-md 0;
    }

    &--start-end,
    &--multiple-selected {
      border-radius: @border-radius-md;
    }

    &--middle {
      color: var(--calendar-range-middle-color, @calendar-range-middle-color);

      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: currentColor;
        content: '';
        opacity: var(
          --calendar-range-middle-background-opacity,
          @calendar-range-middle-background-opacity
        );
      }
    }

    &--disabled {
      cursor: default;
      color: var(--calendar-day-disabled-color, @calendar-day-disabled-color);
    }
  }

  &__top-info,
  &__bottom-info {
    position: absolute;
    right: 0;
    left: 0;
    font-size: var(--calendar-info-font-size, @calendar-info-font-size);
    line-height: var(--calendar-info-line-height, @calendar-info-line-height);

    @media (max-width: 350px) {
      font-size: 9px;
    }
  }

  &__top-info {
    top: 6px;
  }

  &__bottom-info {
    bottom: 6px;
  }

  &__selected-day {
    width: var(--calendar-selected-day-size, @calendar-selected-day-size);
    height: var(--calendar-selected-day-size, @calendar-selected-day-size);
    color: var(--calendar-selected-day-color, @calendar-selected-day-color);
    background-color: var(
      --calendar-selected-day-background-color,
      @calendar-selected-day-background-color
    );
    border-radius: @border-radius-md;
  }
}