@blue: #4183ff;
@block-size: 36px; // 不做宽度自适应 高宽固定

// 日历
.ngCalendar {
  & > .ant-picker-panel {
    border-top: none !important;

    & > .ant-picker-date-panel > .ant-picker-body {
      padding: 10px 0 0;

      .ant-picker-content {
        height: auto !important;
      }

      // 日历第一排字体
      .ant-picker-content thead tr th {
        width: @block-size;
        height: @block-size;
        font-size: 16px;
        font-weight: bold;
      }

      // 基本单元格字体
      .ant-picker-cell {
        color: rgba(0, 0, 0, 0.5);
        font-size: 16px;
        // font-weight: bold;
      }

      // 当月单元格字体
      .ant-picker-cell-in-view {
        color: #000000;
      }

      // 单元格日期数值
      .ant-picker-calendar-date-value {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
      }

      // 基本单元格
      .ant-picker-cell .ant-picker-cell-inner {
        width: @block-size;
        height: @block-size;
        border-radius: 6px;
      }

      // 选中的单元格
      .ant-picker-cell-selected .ant-picker-cell-inner {
        background: @blue;
      }

      // 今日单元格
      .ant-picker-cell-today {
        color: @blue;
      }

      // 今日单元格(去除默认边框)
      .ant-picker-cell-today .ant-picker-cell-inner::before {
        border: none;
      }
    }
  }
}

// 日历 - 收起状态(仅用于上下月)
.ngCalendar-close {
  .ant-picker-content tbody tr:not(:nth-of-type(1)) {
    display: none;
  }
}

// 日历头部
.ngCalendarHeader {
  // 月份显示和选择
  & > .ant-col:nth-of-type(1) {
    display: flex;
    justify-content: center;
    min-width: calc(100% / 7);
    color: @blue;
    font-size: 20px;
    // font-weight: bold;

    & > span {
      padding: 0 10px;
    }
  }

  // 今天
  & > .ant-col:nth-of-type(2) {
    display: flex;
    justify-content: center;
    min-width: calc(100% / 7);
    color: @blue;
    font-size: 14px;

    & > span {
      padding: 0 10px;
    }
  }
}

// 日历展开切换按钮
.ng-calendar-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 8px;

  & > span:nth-of-type(1) {
    font-size: 14px;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.86);
  }

  & > .anticon {
    font-size: 20px !important;
  }

  & > .calendar-expand-open {
    width: calc(100% - 28px);
  }

  & > .calendar-expand-close {
    width: calc(100% - 28px);
    transform: rotate(180deg);
  }
}

// 不显示默认选中样式日历面板
.ngCalendar-unSelected {
  .ant-picker-cell-selected .ant-picker-calendar-date-value {
    color: #000000;
  }

  .ant-picker-panel > .ant-picker-date-panel > .ant-picker-body .ant-picker-cell-selected .ant-picker-cell-inner {
    background: unset;
  }
}