@import '../../style/index.less';

@calendarBody-prefix-cls: ~'@{xui-prefix}-calendar-body';

.@{calendarBody-prefix-cls} {
  position: relative;
  margin: 0 auto;

  &--week {
    display: flex;

    th {
      display: inline-block;
      flex: 1;
      width: 24px;
      height: 24px;
      margin-top: 9px;
      line-height: 20px;
      text-align: center;
    }
  }

  &--dayBlock {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 6px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;

    &:hover {
      background-color: fade(@primary-color, 20%);
    }
  }

  &--thisMonth {
    color: @text-color;
  }

  &--prevMonth {
    color: @disabled-color;
  }

  &--nextMonth {
    color: @disabled-color;
  }

  &--today {
    color: @primary-color;
    line-height: 20px;
    background-color: fade(@primary-color, 20%);
    border: 1px solid @primary-color;

    &:hover {
      background-color: fade(@primary-color, 20%);
    }
  }

  &--active {
    color: #fff;
    background-color: @primary-color;

    &:hover {
      background-color: @primary-color;
    }
  }

  &--disable {
    color: @disabled-color;
    background-color: @disabled-bg;
    cursor: not-allowed;

    &:hover {
      background-color: @disabled-bg;
    }
  }
}