@import "mixins/mixins";
@import "common/var";

@include b(calendar-pro) {
  background-color:#fff;
  width: 100%;
  height: 100%;
  @include e(title) {
    @include clear;
    margin-bottom: 20px;
    @include e(title-info) {
      @include float;
      font-size: 20px;
      font-weight: bolder;
    }
    @include e(tool) {
      @include float(right);
    }
  }
  &.showWeek{
    .weekend{
      background-color: $--calendar-weekend-background-color;
    }
  }
  @include e(body) {
    table{
      border-collapse:collapse;
      th{
        padding: 10px 0;
        font-weight: normal;
      }
      td{
        position: relative;
        border: 1px solid $--border-color-base;
        width: 300px;
        cursor: pointer;
        &:hover{
          .day-box{
            background-color: $--calendar-selected-background-color;
          }
        }
        .day-box{
          transition: $--all-transition;
          position: relative;
          height: 68px;
          padding: 10px;
          font-size: 14px;
          &.highlighter{
            background-color: $--color-success-lighter;
            .info-date{
              color: $--color-success;
            }
          }
          &.select{
            width: auto;
            background-color: $--calendar-selected-background-color;
            .info-date{
              color:$--calendar-selected-font-color;
            }
          }
          &.disabled{
            cursor: not-allowed;
            background-color: $--background-color-darken;
            color: $--color-text-placeholder;
          }
          &.other-month-day{
            opacity: 0.6;
          }
          &.today{
            outline: 2px solid $--color-primary;
            z-index: 2;
          }
        }
        .info-date{
          transition: $--all-transition;
          font-size: 18px;
          font-weight: bolder;
        }
        .info-festival{
          margin-top: 3px;
          text-align: center;
        }
        .info-lunar{
          position: absolute;
          bottom: 10px;
          right: 10px;
        }
        .info-term{
          position: absolute;
          bottom: 10px;
          left: 10px;
        }
        
      }
    }
  }
}