/**
 *
 * This file may have been modified by Bytedance Inc. (“Bytedance Inc.'s Modifications”). 
 * All Bytedance Inc.'s Modifications are Copyright (year) Bytedance Inc..  
 * 
 * This source code is licensed under the Apache license.
 * See LICENSE file in the project root for license information.
 *
 */
// 日期输入框样式覆写
@picker-prefix-cls: ~'@{ant-prefix}-picker';

// 尺寸
@picker-year-cell-width: 72px;
@picker-month-cell-width: 60px;
@picker-panel-width: @picker-panel-cell-width * 7 + 18 * 2;

.@{picker-prefix-cls} {
  line-height: @Font-Lineheight-1;
  padding: 5px 10px 5px 12px;
  transition: all .3s;

  &-range {
    .@{picker-prefix-cls}-clear {
      right: 10px;
    }
    // 范围选择器 双行模式

    &.twoLine {
      flex-direction: column;
      position: relative;
      .@{picker-prefix-cls}-range-separator {
        position: absolute;
        right: 3px;
        top: 7px;
      }
      .@{picker-prefix-cls}-suffix {
        position: absolute;
        right: 8px;
        bottom: 8px;
      }
      .@{picker-prefix-cls}-clear {
        position: absolute;
        top: auto;
        right: 8px;
        bottom: 2px;
      }
      .@{picker-prefix-cls}-input:first-child {
        margin-bottom: 10px;
      }
    }
  }

  .auxo-range-picker-separator {
    display: inline-block;
    width: 8px;
    height: 1px;
    vertical-align: middle;
    background: @color-text-icon-3;
  }
}

// input
.@{picker-prefix-cls}-range-separator {
  color: @color-text-icon-3;
}

// 图标颜色
.@{picker-prefix-cls}-suffix {
  color: @color-text-icon-2; // @disabled-color;
}

// panel
.@{picker-prefix-cls}-panel-container {
  border: 1px solid @color-line-1;

  .@{picker-prefix-cls}-panel {
    border-width: 0;
    .@{picker-prefix-cls}-week-panel {
      .@{picker-prefix-cls}-cell-week {

        &::after {
          content: '周'; 
        }
      }
    }
  }

  .@{picker-prefix-cls}-footer {
    border-top: 1px solid @color-line-1;
  }
}

// header
.@{picker-prefix-cls}-header {

  button {
    color: @color-text-icon-2;
  }

  &-view {

    button {
      color: @color-text-icon-0;
    }
  }
}

.@{picker-prefix-cls}-content {

  th {
    height: 32px;
    color: @text-color-secondary;
  }
}

// panel
.@{picker-prefix-cls}-date-panel {
  .@{picker-prefix-cls}-body {
    padding: 12px 18px; // @padding-xs @padding-sm;
  }
}

.@{picker-prefix-cls}-decade-panel,
.@{picker-prefix-cls}-year-panel,
.@{picker-prefix-cls}-quarter-panel,
.@{picker-prefix-cls}-month-panel,
.@{picker-prefix-cls}-week-panel,
.@{picker-prefix-cls}-date-panel {
  width: @picker-panel-width;
}

.@{picker-prefix-cls}-year-panel,
.@{picker-prefix-cls}-quarter-panel,
.@{picker-prefix-cls}-month-panel {
  .@{picker-prefix-cls}-body {
    padding: @Spacing-6 @Spacing-9;
  }

  .@{picker-prefix-cls}-cell-disabled .@{picker-prefix-cls}-cell-inner {
    background: transparent;
  }
}

.@{picker-prefix-cls}-year-panel {
  .@{picker-prefix-cls}-cell-inner {
    width: @picker-year-cell-width;
  }
}

.@{picker-prefix-cls}-month-panel {
  .@{picker-prefix-cls}-cell-inner {
    width: @picker-month-cell-width;
  }
}

.@{picker-prefix-cls}-cell {
  padding: 4px 0;

  &-in-view {
    color: @color-text-icon-0;
  }
}

// 当前日期
.@{picker-prefix-cls}-date-panel {
  .@{picker-prefix-cls}-cell-in-view.@{picker-prefix-cls}-cell-today {
    .@{picker-prefix-cls}-cell-inner::before {
      border: 0;
    }

    &:not(.@{picker-prefix-cls}-cell-selected):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end):not(.@{picker-prefix-cls}-cell-range-hover-start):not(.@{picker-prefix-cls}-cell-range-hover-end):not(.@{picker-prefix-cls}-cell-disabled) {
      .@{picker-prefix-cls}-cell-inner {
        color: @color-primary-brand;
      }
    }
  }
}

// 不可选日期
// 为了增加优先级覆盖antd的样式
.@{picker-prefix-cls}-cell.@{picker-prefix-cls}-cell-disabled {
  color: @disabled-color;
  pointer-events: auto;
  cursor: not-allowed;

  &::before {
    min-width: @picker-panel-cell-height;
  }

  &:hover:not(.@{picker-prefix-cls}-cell-selected):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end):not(.@{picker-prefix-cls}-cell-range-hover-start):not(.@{picker-prefix-cls}-cell-range-hover-end) {
    .@{picker-prefix-cls}-cell-inner {
      background: transparent;
    }
  }

  &.@{picker-prefix-cls}-cell-today {
    .@{picker-prefix-cls}-cell-inner {
      color: @color-text-icon-3;

      &::before {
        border: 1px solid @color-line-0;
      }
    }
  }
}

// footer 快捷键
.@{picker-prefix-cls}-footer {
  line-height: 48px;
  text-align: left;

  .@{picker-prefix-cls}-ok {
    .@{ant-prefix}-btn {
      min-width: 42px;
      padding: @padding-xss 9px;
    }
  }

  .@{picker-prefix-cls}-ranges {
    padding: @Spacing-3 @Spacing-6;

    .@{picker-prefix-cls}-preset {
      .@{ant-prefix}-tag,
      .@{ant-prefix}-sp-tag {
        margin-right: @Spacing-2;
        padding: @Spacing-2 - 1px @margin-xs;
        font-size: @font-size-sm;
        line-height: @Font-Lineheight-0;
        color: @color-text-icon-0;
        background: @component-background;
        border: 1px solid @color-line-0;
        border-radius: @border-radius-base;
        cursor: pointer;

        .sp-tag-content {
          color: @color-text-icon-0;
        }
      }
    }
  }
}

.@{picker-prefix-cls}-cell {

  &-range-hover-start::after,
  &-range-hover-end::after,
  &-range-hover::after {
    right: 0;
    left: 0;
  }

  &-in-view.@{picker-prefix-cls}-cell-range-hover-start:not(.@{picker-prefix-cls}-cell-in-range):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end),
  &-in-view.@{picker-prefix-cls}-cell-range-hover-end:not(.@{picker-prefix-cls}-cell-in-range):not(.@{picker-prefix-cls}-cell-range-start):not(.@{picker-prefix-cls}-cell-range-end),
  &-in-view.@{picker-prefix-cls}-cell-range-hover-start.@{picker-prefix-cls}-cell-range-start-single,
  &-in-view.@{picker-prefix-cls}-cell-range-hover-end.@{picker-prefix-cls}-cell-range-end-single,
  &-in-view.@{picker-prefix-cls}-cell-range-hover:not(.@{picker-prefix-cls}-cell-in-range) {

    &::after {
      border: 0;
      background: @color-primary-bright;
    }
  }
}

// join类型日期范围选择器

.@{picker-prefix-cls}:not(.sp-null) {
  &.sp-range-picker-open,
  &.sp-range-picker-join.@{picker-prefix-cls}-focused {
    > .@{picker-prefix-cls}-input {

      > input,
      > input::-webkit-input-placeholder {
        color: @color-text-icon-3;
        opacity: 1;
      }
    }
  }
}

.@{picker-prefix-cls}-range-wrapper {

  .sp-picker-range {

    .sp-picker-range-header {
      width: 578px;
      display: flex;
      padding: 12px 16px;
      justify-content: space-between;
      border-bottom: 1px solid @border-color-split;

      .sp-picker-range-date {
        display: inline-block;
        min-width: 110px;
        margin-right: 8px;

        .sp-picker-range-date-text {
          display: inline-block;
          margin-right: @spacing-s;
          color: @color-text-icon-0;
        }

        .sp-picker-range-date-placeholder {
          color: @color-text-icon-2;
        }

        .sp-picker-range-date-icon {
          color: @color-text-icon-2;
          float: right;
        }
      }

      .sp-picker-range-time {
        border: 0;
        height: 32px;
        box-shadow: none;

        &.@{picker-prefix-cls}-focused {
          background: @color-fill-deepen-4;
        }
        .@{picker-prefix-cls}-input {

          > input {
            background-color: transparent !important;
          }
        }
      }

      .sp-picker-range-time-popup {
        z-index: 1051;
      }
    }

    .sp-picker-range-body {
      height: 300px;
      .@{picker-prefix-cls} {
        padding: 0 !important;
        width: 0 !important;
        height: 0 !important;
        border: none !important;
        display: block !important;
        .@{picker-prefix-cls}-input {
          width: 120px;
          height: 32px;
          position: absolute;
          top: -45px;
          border-radius: 4px;
          padding-left: 10px;

          > input {
            background-color: transparent !important;
          }
        }
        .@{picker-prefix-cls}-input-active {
          background-color: @color-fill-deepen-4;
        }
        :nth-child(1).@{picker-prefix-cls}-input {
          left: 14px;
        }
        :nth-child(3).@{picker-prefix-cls}-input {
          left: 307px;
        }
        &.@{picker-prefix-cls}-focused:not(.sp-null) > .@{picker-prefix-cls}-input {

          > input {
            color: @color-text-icon-0;
            opacity: 1;
          }

          > input::-webkit-input-placeholder {
            color: @color-text-icon-3;
            opacity: 1;
          }
        }
        .@{picker-prefix-cls}-range-separator {
          display: none;
        }
        .@{picker-prefix-cls}-suffix {
          display: none;
        }
      }
      .@{picker-prefix-cls}-panel-container {
        border: none !important;
        box-shadow: none !important;
      }
    }

    .sp-picker-range-footer {
      height: 48px;
      border-top: 1px solid @border-color-split;
      position: relative;

      .sp-picker-range-ok-btn {
        position: absolute;
        right: 12px;
        bottom: 11px;
        min-width: 42px;
        padding: 4px 9px;
        z-index: 1051;
      }
    }
  }
}

.sp-picker-range-time-popup {
  .@{picker-prefix-cls}-footer {
    display: none !important;
  }
}

// Size
.@{picker-prefix-cls} {
  &.@{picker-prefix-cls}-large {
    padding: (@Spacing-3 + 1) @Spacing-6;
  }

  &.@{picker-prefix-cls}-small {
    padding: (@Spacing-2 + 1) @Spacing-5 (@Spacing-2 + 1) @Spacing-6;

    .@{picker-prefix-cls}-input > input {
      font-size: @Font-Size-0;
      line-height: @Font-Lineheight-0;
    }
  }
}

// 时间选择内容居中
.@{picker-prefix-cls}-time-panel-column:not(.sp-null)
> li.@{picker-prefix-cls}-time-panel-cell
.@{picker-prefix-cls}-time-panel-cell-inner {
  padding: 0;
  text-align: center;
}

// 去除日期范围选择小三角
.@{picker-prefix-cls}-dropdown-placement-bottomLeft:not(.sp-null) .@{picker-prefix-cls}-range-arrow {
  display: none;
}
// 下拉框位置保持统一
.@{picker-prefix-cls}-dropdown-range:not(.sp-null) {
  padding: 0;
}

// 范围选择器 日期输入框 隐藏高亮选中时底部border
.@{picker-prefix-cls}-active-bar {
  display: none;
}

.@{picker-prefix-cls}-range.@{picker-prefix-cls}-focused > .@{picker-prefix-cls}-input-active {

  > input,
  > input::-webkit-input-placeholder {
    color: @color-primary-brand;
    opacity: .9;
  }
}

.@{picker-prefix-cls}-input:not(.sp-null) {
  .@{ant-prefix}-picker-clear {
    background-color: @picker-clear-bg;
  }

  &:hover {
    .@{ant-prefix}-picker-suffix:not(:last-child) {
      opacity: 0;
    }
  }

  > input {
    border-radius: 0;

    &:hover {
      background: none;
    }

    &:focus {
      background: none;
    }
  }
}

.@{picker-prefix-cls}-today-btn {
  margin-left: @margin-xs;
}
.@{picker-prefix-cls}-today-btn,
.@{picker-prefix-cls}-now-btn {
  margin-right: @Spacing-2;
  padding: @Spacing-2 - 1px @margin-xs;
  font-size: @font-size-sm;
  line-height: @Font-Lineheight-0;
  color: @btn-style-default-color;
  background: @btn-style-default-background;
  border: 1px solid @btn-style-default-border-color;
  border-radius: @border-radius-base;
  display: inline-block;
  cursor: pointer;

  &:hover {
    color: @btn-style-default-hover-color;
    background: @btn-style-default-hover-background;
    border: 1px solid @btn-style-default-hover-border-color;
  }

  &:active {
    color: @btn-style-default-active-color;
    background: @btn-style-default-active-background;
    border: 1px solid @btn-style-default-active-border-color;
  }
}

.sp-range-picker-join-dropdown {
  .@{picker-prefix-cls}-panel-container {
    margin-left: 0 !important;
  }
}