/**
 * FilterItem 样式
 * RangePicker 按 Figma Pisell 2.0 Component Library (node-id=13586-90520)
 * 使用 pisell-lowcode- 前缀（RangePicker 传入 prefixCls="pisell-lowcode"）
 * - Border: Gray/300 #D0D5DD, 1px
 * - Background: Base/White #FFFFFF
 * - Text/Icon: Gray/500 #667085
 * - Typography: Text md/Regular - Inter 16px, weight 400, line-height 24px
 * - Shadow: Shadow/xs 0 1px 2px rgba(16, 24, 40, 0.05)
 * - Border radius: 8px
 */

.pisell-lowcode-range-picker-wrap {
  //width: 257px;
  width: 100%;

  .pisell-lowcode-range {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0;
    color: #667085;
    border-radius: 8px;
    border: 1px solid #d0d5dd;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    width: 100%;
    height: 48px;
    min-height: 48px;
    padding: 6px 11px;

    .pisell-lowcode-picker-input {
      height: 36px;

      > input {
        font-family: inherit;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #667085;

        &::placeholder {
          color: #667085;
          opacity: 0.6;
        }
      }
    }

    .pisell-lowcode-picker-separator {
      color: #667085;
    }

    .pisell-lowcode-picker-suffix,
    .pisell-lowcode-picker-clear {
      color: #667085;
    }

    &:hover {
      border-color: #d0d5dd;
    }

    &.pisell-lowcode-picker-focused {
      border-color: #d0d5dd;
      box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.05);
    }

    &.pisell-lowcode-picker-large {
      height: 48px;
      min-height: 48px;
      padding: 6px 11px;

      .pisell-lowcode-picker-input {
        height: 36px;
      }
    }

    &.pisell-lowcode-picker-small {
      min-height: 32px;
      padding: 2px 7px;

      .pisell-lowcode-picker-input {
        height: 24px;
      }

      .pisell-lowcode-picker-input > input {
        font-size: 14px;
      }
    }
  }
}
