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

.vm-calendar {
  width: 100%;
  height: 100%;
  --height: 86px;
  .ant-picker-date-panel,
  .ant-picker-content {
    width: 100% !important;
  }
  .ant-picker-calendar,
  .ant-picker-calendar-full {
    background-color: var(--vm-calendar-bg-color) !important;
    border: none !important;

    .ant-picker-panel {
      background: var(--vm-calendar-bg-color) !important;
      padding-top: 8px;
    }
    .ant-picker-calendar-date-today .ant-picker-calendar-date-value {
      color: var(--vm-calendar-cell-font-color);
    }
    .ant-picker-body {
      padding: 0 !important;
    }
    .ant-picker-calendar-date-content {
      height: var(--height) !important;
    }
    .ant-picker-content th {
      color: var(--vm-calendar-cell-font-color);
    }

    .ant-picker-panel .ant-picker-calendar-date {
      color: var(--vm-calendar-cell-font-color);
      border-top: 2px solid var(--vm-calendar-cell-border-color) !important;
      background: transparent !important;
    }

    .ant-picker-panel .ant-picker-cell:hover .ant-picker-calendar-date {
      border-top: 2px solid var(--vm-calendar-cell-active-border-color) !important;
    }

    .ant-picker-cell .ant-picker-cell-in-view .ant-picker-cell-today {
      border-top: none !important;
    }

    .ant-picker-cell .ant-picker-cell-in-view .ant-picker-cell-selected {
      border-top: none !important;
      background: var(--vm-calendar-bg-color) !important;
    }

    .ant-picker-calendar-full
      .ant-picker-panel
      .ant-picker-calendar-date-today {
      color: var(--vm-calendar-cell-active-border-color);
      border-top: 2px solid var(--vm-calendar-cell-active-border-color) !important;
    }

    .ant-picker-calendar-date-today {
      background: transparent !important;
      border-top: 2px solid var(--vm-calendar-cell-active-border-color) !important;
    }
    .ant-picker-calendar-full
      .ant-picker-panel
      .ant-picker-cell-selected
      .ant-picker-calendar-date {
      background: transparent !important;
    }
  }
}

.vm-calendar-percent {
  position: absolute;
  top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.vm-calendar-head-item {
  --blue-bg: rgba(22, 119, 255, 0.1);
  --green-bg: rgba(15, 185, 100, 0.1);
  --yellow-bg: rgba(255, 170, 0, 0.2);
  --cyan-bg: rgba(15, 185, 100, 0.1);
  --red-bg: rgba(245, 34, 45, 0.1);
  --gray-bg: rgba(119, 119, 119, 0.1);
  --color: #1f1f1f;

  &.dark {
    --blue-bg: rgba(89, 157, 255, 0.2);
    --green-bg: rgba(19, 249, 122, 0.2);
    --yellow-bg: rgba(255, 170, 0, 0.2);
    --cyan-bg: rgba(0, 252, 246, 0.2);
    --red-bg: rgba(255, 62, 72, 0.2);
    --gray-bg: rgba(153, 153, 153, 0.2);
    --color: #fff;
  }

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  color: var(--color);

  img {
    width: 16px;
    height: 16px;
    display: inline-block;
  }

  .vm-calendar-common {
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    border-radius: 8px;
  }

  &.blue {
    .vm-calendar-common;
    background: var(--blue-bg);
  }
  &.green {
    .vm-calendar-common;
    background: var(--green-bg);
  }
  &.cyan {
    .vm-calendar-common;
    background: var(--cyan-bg);
  }
  &.yellow {
    .vm-calendar-common;
    background: var(--yellow-bg);
  }
  &.red {
    .vm-calendar-common;
    background: var(--red-bg);
  }
  &.gray {
    .vm-calendar-common;
    background: var(--gray-bg);
  }
}
