@hc-primary: var(--ant-color-primary, #1677ff);

.hc-date-range-picker-wrapper {
  position: relative;
  display: inline-block;

  .hc-date-range-picker-input {
    cursor: pointer;

    .ant-input[disabled] {
      color: rgba(0, 0, 0, 25%);
      background-color: #f5f5f5;
      cursor: not-allowed;
    }
  }

  &.hc-date-range-picker-flat {
    display: block;

    .hc-date-range-picker-flat-content {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .hc-date-range-picker-flat-radio-group {
      display: inline-flex;
      flex-wrap: nowrap;
      gap: 3px;
      margin: 0;
      padding: 3px;
      background: rgba(40, 105, 246, 10%);
      border-radius: 4px;

      .ant-radio-button-wrapper {
        height: 26px;
        padding: 0 12px;
        line-height: 26px;
        background: none;
        border: none;
        border-radius: 4px;

        &:not(:first-child)::before {
          width: 0;
        }

        &.ant-radio-button-wrapper-checked {
          color: @hc-primary;
          font-weight: 500;
          background: #fff;
          box-shadow: 0 1px 10px #00000014;
        }
      }
    }
  }
}

.hc-date-range-picker-popover {
  .ant-popover-inner-content {
    padding: 0;
  }

  .hc-date-range-picker-content {
    min-width: 424px;
    background: #fff;

    .hc-date-range-picker-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 55px;
      padding: 0 16px;
      border-bottom: 1px solid #d9d9d9;

      .hc-date-range-picker-switch {
        display: flex;
        align-items: center;
        font-size: 14px;

        span {
          transition: color 0.3s;
        }
      }

      .hc-date-range-picker-close {
        color: rgba(0, 0, 0, 45%);
        font-size: 14px;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: rgba(0, 0, 0, 75%);
        }
      }
    }

    .hc-date-range-picker-body {
      padding: 0;

      .hc-date-range-picker-recent {
        padding: 16px;

        .ant-slider {
          margin: 10px 20px 45px;
        }

        .hc-date-range-picker-footer {
          display: flex;
          justify-content: flex-end;
          margin-top: 16px;
        }
      }

      .hc-date-range-picker-custom {
        .hc-date-range-picker-range {
          width: 100%;
        }

        .hc-date-range-picker-tip {
          margin-top: 8px;
          color: #ff4d4f;
          font-size: 12px;
        }

        .hc-date-range-picker-footer {
          display: flex;
          justify-content: flex-end;
          margin-top: 16px;
        }
      }
    }
  }
}

.hc-date-range-picker-custom {
  .rc-calendar {
    border: none;
    box-shadow: none;
  }

  .rc-calendar-range {
    width: fit-content;
  }

  .rc-calendar-input-wrap {
    border-top: 1px solid #d9d9d9;
  }

  .rc-calendar-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .rc-calendar-footer-btn {
      display: flex;
      align-items: center;

      .rc-calendar-ok-btn {
        line-height: 24px;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 12%);
        background-color: @hc-primary;
        border-color: @hc-primary;
        border-radius: 4px;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 4.5%);

        &:hover {
          background: #528eff;
          border-color: #528eff;
        }
      }
    }
  }

  .rc-calendar-ok-btn {
    height: 24px;
    padding: 0 15px;
    color: #fff;
    font-size: 12px;
    background-color: #1890ff;
    border-color: #1890ff;
    border-radius: 2px;

    &:hover {
      background-color: #40a9ff;
      border-color: #40a9ff;
    }
  }

  .rc-calendar-today-btn {
    color: #1890ff;

    &:hover {
      color: #40a9ff;
    }
  }
}
