@global-picker-preifx-cls: ~'@{ant-prefix}-global-picker';
@picker-prefix-cls: ~'@{ant-prefix}-picker';
@customDateRange: custom-date-range;
@tab-nav-height: 45px;
@tab-content-height: 345px;

.panel-icon-style() {
  position: relative;
  font-size: @br-font-size-largest;
  cursor: pointer;

  & > svg {
    position: relative;
    z-index: 1;
  }

  &::after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    border-radius: @border-radius-base;
    content: ' ';
  }

  &:hover {
    color: @primary-color-hover;
    &::after {
      background-color: rgba(0, 106, 255, 0.08);
    }
  }
}

// ======================== global-picker ========================
.@{global-picker-preifx-cls} {
  &-wrap {
    display: flex;
    justify-content: flex-end;

    .@{ant-prefix}-picker {
      padding: 0;

      &-open {
        width: 335px;
      }

      // &-disabled {
      //   cursor: not-allowed;
      //   pointer-events: none;
      // }

      .@{global-picker-preifx-cls}-left-arrow,
      .@{global-picker-preifx-cls}-right-arrow {
        width: 30px;
        height: 30px;

        &:focus {
          background: transparent;
          border-color: transparent;

          .@{iconfont-css-prefix} {
            color: @icon-color;
          }
        }

        &:active {
          background: @br-btn-hover-bg;
          .@{iconfont-css-prefix} {
            color: @primary-color-active;
          }
        }

        &:hover {
          background: @br-btn-hover-bg;
          .@{iconfont-css-prefix} {
            color: @primary-color-hover;
          }
        }
      }

      .@{global-picker-preifx-cls}-left-arrow {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      .@{global-picker-preifx-cls}-right-arrow {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;

        &.@{global-picker-preifx-cls}-disabled-icon {
          background: transparent;
          cursor: not-allowed;
          .@{iconfont-css-prefix} {
            color: @disabled-color;
          }
        }
      }

      .@{global-picker-preifx-cls}-text-wrap {
        display: inline-flex;
        flex: 1 0 auto;
        align-items: center;

        .@{global-picker-preifx-cls}-clear {
          font-size: @br-font-size-largest;
          cursor: pointer;
          &:hover {
            color: @primary-color-hover;
          }
        }

        .@{global-picker-preifx-cls}-text {
          height: 30px;
          padding: 0 10px;
          line-height: 30px;
          text-align: center;
        }

        // live tail
        .@{global-picker-preifx-cls}-live {
          display: inline-flex;
          flex: 1;
          align-items: center;
          height: 30px;
          padding: 0 8px;
          line-height: 30px;

          &-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 20px;
            margin-right: 8px;
            background-color: #00b359;
            border-radius: 3px;
            .@{iconfont-css-prefix} {
              color: #fff;
              font-size: 16px;
            }
          }
        }

        .@{global-picker-preifx-cls}-open {
          margin-right: 8px;
          font-size: @br-font-size-largest;
          transition: transform 0.3s;

          &.open {
            transform: rotate(180deg);
          }
        }

        & > .hidden {
          display: none;
        }

        &.disabled {
          pointer-events: none;

          .@{global-picker-preifx-cls}-text {
            color: @text-color;
          }
        }
      }
    }
  }

  // ============= global-panel ==============
  &.@{picker-prefix-cls}-panel-container {
    transition: all 0.3s ease-in;
    .panel-wrap {
      width: 498px;

      .@{ant-prefix}-tabs-top > .@{ant-prefix}-tabs-nav {
        margin-bottom: 0;
      }

      .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: @padding-xs - 2 @padding-sm;
        background-color: @background-color-base;

        .help-tips {
          color: @icon-color;
        }

        .time-text-box {
          display: flex;
          align-items: center;
          letter-spacing: 0;

          .duration {
            min-width: 30px;
            margin-right: @margin-xss;
            padding: 1px @padding-xss;
            background-color: @br-btn-hover-bg;
            border-radius: @border-radius-base;

            &.error {
              color: @error-color;
              background-color: ~'var(--@{ant-prefix}-error-color-bg)';
            }
          }

          // live tail
          .live {
            display: inline-flex;
            flex: 1;
            align-items: center;

            &-icon {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 24px;
              height: 20px;
              margin-right: 8px;
              background-color: @success-color;
              border-radius: 3px;
              .@{iconfont-css-prefix} {
                color: #fff;
                font-size: 16px;
              }
            }
          }
        }

        .@{iconfont-css-prefix} {
          .panel-icon-style();
        }
      }

      .panel-body {
        .@{ant-prefix}-tabs-nav {
          margin: @margin-md @margin-md 0;

          &-wrap {
            padding: 0 @padding-xs;
          }
        }

        .date-list-wrap {
          display: flex;
          justify-content: center;
          height: @tab-content-height;
          margin-bottom: 8px;
          padding: @padding-xs @padding-md - 6 0 @padding-md;
          overflow-x: hidden;
          overflow-y: scroll;
          .customScrollbar();
        }

        .date-list-box {
          flex: 1;
          min-width: 126px;

          &.special {
            flex: 2;
            min-width: 210px;
          }
        }

        .date-list-title {
          height: @height-base;
          padding: 0 @padding-xs;
          font-weight: 600;
          line-height: @height-base;
        }

        .date-list {
          width: 100%;
          margin: 0;
          padding: 0;
          list-style: none;

          & > li {
            height: @height-base;
            padding: 0 @padding-xs;
            overflow: hidden;
            line-height: @height-base;
            white-space: nowrap;
            text-align: left;
            text-overflow: ellipsis;
            cursor: pointer;

            & + li {
              margin-top: 1px;
            }

            &.active {
              color: @primary-color;
            }

            &.disabled {
              color: @disabled-color;
              cursor: not-allowed;
              &:hover {
                background-color: transparent;
              }
            }

            &:hover {
              background-color: @primary-1;
              border-radius: 6px;
            }
          }
        }

        .date-empty {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .@{customDateRange} {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          // align-items: center;
          height: @tab-content-height;

          &-placeholder {
            width: 498px;
            height: 100%;
          }

          .@{picker-prefix-cls}-range {
            position: absolute;
            top: 20px;
            left: 0;
            z-index: -1;

            &-arrow {
              display: none;
            }
          }

          .@{picker-prefix-cls}-dropdown-range {
            top: 0 !important;
            left: 0 !important;
            padding: 0;
            pointer-events: initial !important;

            .@{picker-prefix-cls}-date-range-wrapper {
              & > .@{picker-prefix-cls}-panel-container {
                box-shadow: none;
              }
            }
          }

          // 特殊日期范围的样式
          &-cell-inner-special {
            color: @primary-color;
          }

          // >>> disabled
          .@{picker-prefix-cls}-cell-disabled {
            .@{customDateRange}-cell-inner-special {
              color: @disabled-color;
            }
          }

          // >>> Selected
          .@{picker-prefix-cls}-cell-in-view.@{picker-prefix-cls}-cell-selected
            .@{customDateRange}-cell-inner-special,
          .@{picker-prefix-cls}-cell-in-view.@{picker-prefix-cls}-cell-range-start
            .@{customDateRange}-cell-inner-special,
          .@{picker-prefix-cls}-cell-in-view.@{picker-prefix-cls}-cell-range-end
            .@{customDateRange}-cell-inner-special {
            color: @text-color-inverse;
          }
          // >>> hover
          .@{picker-prefix-cls}-cell:hover.@{picker-prefix-cls}-cell-in-view.@{picker-prefix-cls}-cell-in-range: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
            ) {
            .@{customDateRange}-cell-inner-special {
              color: @primary-color;
            }
          }

          .@{picker-prefix-cls}-cell:hover.@{picker-prefix-cls}-cell-today: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
            ) {
            .@{customDateRange}-cell-inner-special {
              color: @primary-color;
            }
          }
        }
      }

      .help-box {
        text-align: left;
        .help-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: @padding-md;
          color: @heading-color;
          font-weight: 600;

          .@{iconfont-css-prefix} {
            .panel-icon-style();
          }
        }

        .help-content {
          width: calc(100% - 2px);
          height: calc((@tab-content-height + @tab-nav-height) - 50px - 8px);
          margin-right: 2px;
          margin-bottom: @padding-xs;
          overflow-y: auto;
          .customScrollbar();

          & > p {
            padding: 0 @padding-xs 0 @padding-md;
            white-space: pre-line;
          }
        }
      }
    }
  }

  //  ========== global-toast ==========
  &-toast {
    padding: @padding-xs;
    background-color: @dropdown-background;
    border-radius: @border-radius-base;
    box-shadow: @br-box-shadow-sm;

    &-title {
      margin-bottom: @margin-xs - 2;
    }

    &-content-wrap {
      display: inline-flex;
      align-items: center;
    }

    &-dot {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 0 8px 0 4px;

      &-start,
      &-end {
        width: 7px;
        height: 7px;
        border: @border-width-base @border-style-base @primary-color;
        border-radius: 50%;
      }

      &-dash {
        position: relative;
        width: 1px;
        height: 44px;
        background-image: ~'linear-gradient(@{primary-color} 50%, transparent 50%)';
        background-size: 100% 4px;

        &::after {
          position: absolute;
          top: 50%;
          left: 0;
          width: 12px;
          height: 1px;
          background-image: ~'linear-gradient(to right, @{primary-color} 50%, transparent 50%)';
          background-size: 4px 100%;
          // transform: translateY(-50%);
          content: '';
        }
      }
    }

    &-content {
      &-start {
        margin-bottom: @margin-xs - 2;
      }

      &-duration {
        position: relative;
        display: inline-flex;
        margin-bottom: @margin-xs - 2;
        padding: 1px @padding-xs;
        word-wrap: break-word;
        overflow-wrap: break-word;
        background-color: @primary-1;
        border-radius: @border-radius-base;
      }
    }

    &&-error {
      .@{global-picker-preifx-cls}-toast-dot {
        &-start,
        &-end {
          border-color: @error-color;
        }
        &-dash {
          background-image: ~'linear-gradient(@{error-color} 50%, transparent 50%)';
        }
        &-dash::after {
          background-image: ~'linear-gradient(to right, @{error-color} 50%, transparent 50%)';
        }
      }
      .@{global-picker-preifx-cls}-toast-content-duration {
        color: @error-color;
        background-color: @error-color-outline;
      }
    }
  }
}