@btn-hover-color: @purple-medium;
@btn-focus-color: @purple-dark;

//date picker
.ant-picker {
  width: 100%;
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 16px;
  height: 48px;
  border: 1px solid #bdbdbd;
  &:hover {
    border-color: @primary-color;
  }
}

.date-picker-contariner {
  position: relative;

  .input-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
  }
}

.igloo-date-picker-container {
  position: relative;

  & .igloo-icon {
    color:  @icon-color;
  }

  &:hover {
    .igloo-icon {
      color: @primary-color;
    }
  }

  .igloo-date-picker-icon {
    position: absolute;
    top: 12px;
    right: 16px;

    &:hover {
      .igloo-icon {
        color:  @icon-color;
      }
    }
  }

  .ant-picker-active-bar {
    display: none;
  }

  .igloo-date-picker-separate {
    width: 32px;
    height: 1px;
    border-top: 1px solid #212121;
    margin-right: 16px;
  }
}

.igloo-date-picker-focus {
  border: 1px solid @active-color;

  & .igloo-icon {
    color: @active-color !important;
  }
}

.ant-form-item-has-error {
  .igloo-date-picker-container {
    .igloo-icon {
      color:  @icon-color;
    }
  }

  .igloo-date-picker-focus {
    .ant-picker {
      border-color: @error-color;
    }
  }

  .ant-picker-active-bar {
    background-color: @error-color;
  }
}

.igloo-date-picker-panel {
  .ant-picker-panel {
    .ant-picker-date-panel,
    .ant-picker-week-panel,
    .ant-picker-year-panel,
    .ant-picker-decade-panel,
    .ant-picker-month-panel {
      .ant-picker-header {
        border: none;
        padding: 16px 16px 8px 16px;

        .ant-picker-header-super-prev-btn {
          background-image: data-uri(
            'image/svg+xml;charset=UTF-8',
            './double-left.svg'
          );
          background-color:  @icon-color;

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

        .ant-picker-header-prev-btn {
          background-image: data-uri(
            'image/svg+xml;charset=UTF-8',
            './left.svg'
          );
          background-color:  @icon-color;

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

        .ant-picker-header-next-btn {
          background-image: data-uri(
            'image/svg+xml;charset=UTF-8',
            './right.svg'
          );
          background-color:  @icon-color;

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

        .ant-picker-header-super-next-btn {
          background-image: data-uri(
            'image/svg+xml;charset=UTF-8',
            './double-right.svg'
          );
          background-color:  @icon-color;

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

        .ant-picker-prev-icon,
        .ant-picker-next-icon,
        .ant-picker-super-prev-icon,
        .ant-picker-super-next-icon {
          display: none;
          width: 12px;
          height: 12px;

          &:hover {
            &::before,
            &::after {
              color: @btn-hover-color;
            }
          }

          &:active,
          &s:focus {
            &::before,
            &::after {
              color: @btn-focus-color;
            }
          }
        }

        .ant-picker-next-icon::before,
        .ant-picker-super-next-icon:before,
        ::after,
        .ant-picker-prev-icon:before,
        .ant-picker-super-prev-icon:before,
        ::after {
          width: 12px;
          height: 12px;
          color:  @icon-color;
          border-width: 2px 0px 0px 2px;
        }

        & button {
          line-height: 24px;
        }

        .ant-picker-header-view {
          line-height: 24px;
        }
      }
    }

    &:not(:first-child) {
      .ant-picker-header {
        padding: 16px 16px 8px 8px;
      }

      .ant-picker-body {
        padding: 8px 16px 16px 8px;
      }
    }

    .ant-picker-week-panel {
      width: 280px;
    }
  }

  .ant-picker-date-panel,
  .ant-picker-week-panel {
    .ant-picker-body {
      padding: 8px 16px 16px 16px;

      .ant-picker-content {
        width: 252px;

        & tr > th {
          color: @disabled-text-color;
          font-size: 12px;
        }

        & tr > td {
          font-size: 14px;
        }

        .ant-picker-week-panel-row-selected td,
        .ant-picker-week-panel-row-selected:hover td {
          background-color: #f0f2ff;
          color:  @text-color;
        }

        .ant-picker-week-panel-row-selected td .ant-picker-cell-inner,
        .ant-picker-week-panel-row-selected:hover td .ant-picker-cell-inner {
          color:  @text-color;
        }

        // 处理已选择range中hover效果不对
        .ant-picker-cell-range-hover-start {
          & .ant-picker-cell-inner::after {
            left: -6px;
          }
        }

        .ant-picker-cell-range-hover-end {
          & .ant-picker-cell-inner::after {
            right: -6px;
          }
        }

        .ant-picker-cell {
          width: 36px;

          .ant-picker-cell-inner {
            min-width: 22px;
            height: 22px;
            line-height: 22px;
          }
        }

        .ant-picker-cell:hover:not(.ant-picker-cell-in-view)
          .ant-picker-cell-inner,
        .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(
            .ant-picker-cell-range-start
          ):not(.ant-picker-cell-range-end):not(
            .ant-picker-cell-range-hover-start
          ):not(.ant-picker-cell-range-hover-end)
          .ant-picker-cell-inner {
          border-radius: 50%;
        }

        .ant-picker-cell-in-view.ant-picker-cell-selected
          .ant-picker-cell-inner,
        .ant-picker-cell-in-view.ant-picker-cell-range-start
          .ant-picker-cell-inner,
        .ant-picker-cell-in-view.ant-picker-cell-range-end
          .ant-picker-cell-inner,
        .ant-picker-cell-in-view.ant-picker-cell-today
          .ant-picker-cell-inner::before,
        .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
            .ant-picker-cell-range-end-single
          ):not(.ant-picker-cell-range-start)
          .ant-picker-cell-inner,
        .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
            .ant-picker-cell-range-start-single
          ):not(.ant-picker-cell-range-end)
          .ant-picker-cell-inner {
          border-radius: 50%;
        }
      }

      .ant-picker-cell-today:not(
          .ant-picker-cell-range-start,
          .ant-picker-cell-range-end
        ) {
        color: @primary-color;

        .ant-picker-cell-inner::before {
          z-index: -1;
        }
      }
    }
  }

  .ant-picker-year-panel,
  .ant-picker-month-panel {
    .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
    .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(
        .ant-picker-cell-range-start
      ):not(.ant-picker-cell-range-end):not(
        .ant-picker-cell-range-hover-start
      ):not(.ant-picker-cell-range-hover-end)
      .ant-picker-cell-inner {
      border-radius: 3px;
    }

    .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
    .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
    .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner,
    .ant-picker-cell-in-view.ant-picker-cell-today
      .ant-picker-cell-inner::before,
    .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
        .ant-picker-cell-range-end-single
      ):not(.ant-picker-cell-range-start)
      .ant-picker-cell-inner,
    .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
        .ant-picker-cell-range-start-single
      ):not(.ant-picker-cell-range-end)
      .ant-picker-cell-inner {
      border-radius: 3px;
    }
  }
}

.ant-picker.ant-picker-disabled {
  background: #f9f9f9;
  border-color: #eeeeee;
  color: @disabled-text-color;

  .igloo-icon {
    color: @disabled-text-color;
  }
}

.ant-picker-input > input::placeholder {
  color: @disabled-text-color;
}
.ant-picker-input > input[disabled] {
  color: @disabled-text-color;
}