:local(.wrapper-box) {
  @borderRadius: var(--border-radius-base);
  @input-inner-padding: 14px;

  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 54px;
  border-width: var(--ant-line-width);
  border-style: var(--ant-line-type);
  border-color: var(--ant-color-border);
  border-radius: @borderRadius;
  background-color: var(--color-white-1);

  &.seal-select-wrapper {
    border: none;
    box-shadow: none;

    &.dropdown-visible {
      :local(.wrapper) {
        :global(.ant-select-selector) {
          border-bottom: none !important;
          border-radius: @borderRadius @borderRadius 0 0;
          transition: all 0.2s ease;

          &::before {
            content: '';
            position: absolute;
            height: 1px;
            margin-inline: 1px;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: var(--ant-color-split);
          }
        }

        :global(.ant-select-dropdown) {
          box-shadow: none;
          border-width: var(--ant-line-width);
          border-style: var(--ant-line-type);
          border-color: var(--ant-input-active-border-color);
          border-top: none;
        }

        &:hover {
          :global(.ant-select-dropdown) {
            border-color: var(--ant-input-active-border-color);
          }
        }

        &:focus-within {
          border-color: var(--ant-input-active-border-color) !important;
          outline: 0;
          background-color: var(--ant-input-active-bg);
        }
      }
    }

    &:focus-within {
      border: none;
      box-shadow: none;
    }

    :local(.wrapper) {
      padding-block: 0;

      .label {
        left: @input-inner-padding + 1 !important;
        top: 11px;

        &.isfoucs-has-value {
          top: 11px;
          transition: all 0.2s var(--seal-transition-func);
        }

        &.blur-no-value {
          top: 21px;
          transition: all 0.2s var(--seal-transition-func);
        }

        &.has-prefix {
          top: 11px !important;
        }
      }

      :global(.ant-select-selection-overflow-item) > span {
        display: flex;
        align-items: center;
      }
    }

    &.validate-status-error {
      :global(.ant-select-selector) {
        border-width: var(--ant-line-width) !important;
        border-style: var(--ant-line-type) !important;
        border-color: var(--ant-color-error) !important;

        &:hover {
          border-color: var(--ant-color-error-border-hover) !important;
        }

        &:focus-within {
          border-color: var(--ant-color-error) !important;
        }
      }

      &.dropdown-visible {
        :global(.ant-select-dropdown) {
          border-color: var(--ant-color-error) !important;
        }
      }
    }
  }

  &.seal-input-number {
    padding-right: 0;
  }

  &.borderless {
    border: none;
    box-shadow: none;
  }

  &.filled {
    border: none;
    box-shadow: none;
  }

  &.borderless:focus-within {
    border: none;
    box-shadow: none;
  }

  &.seal-input-wrapper-disabled {
    background-color: var(--ant-color-bg-container-disabled);
    cursor: not-allowed;

    &:hover {
      border-color: var(--ant-color-border);

      :global(.ant-input-search-button) {
        border-color: var(--ant-color-border) !important;
        color: var(--ant-color-text-description) !important;
      }
    }
  }

  &.seal-textarea-wrapper {
    height: auto;
    padding-bottom: 10px;
    padding-right: 10px;
  }

  &.validate-status-error:not(.seal-select-wrapper) {
    border-width: var(--ant-line-width);
    border-style: var(--ant-line-type);
    border-color: var(--ant-color-error);

    &:hover {
      border-color: var(--ant-color-error-border-hover);
    }

    &:focus-within {
      border-color: var(--ant-color-error);
    }
  }

  &:hover {
    border-color: var(--ant-input-hover-border-color);
    transition: all 0.2s ease;
  }

  &:focus-within {
    border-color: var(--ant-input-active-border-color);
    box-shadow: var(--ant-input-active-shadow);
    outline: 0;
    background-color: var(--ant-input-active-bg);
  }

  .add-after {
    position: relative;
    color: var(--ant-color-text-quaternary);
    font-size: 14px;
    padding-right: calc(var(--ant-padding-sm) - 1px);
  }
}

:local(.wrapper) {
  @wrapheight: 54px;
  @inputheight: 32px;
  @borderRadius: 4px;
  @input-inner-padding: 14px;
  @bgColor: transparent;

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
  padding-block: 20px 0;
  max-width: 100%;

  &:hover {
    :global(.ant-input-number-handler-wrap) {
      width: 34px !important;
    }
  }

  &.no-wrapper-style {
    padding-block: 0;
  }

  .extra {
    position: absolute;
    right: 12px;
    top: 8px;
    z-index: 10;
  }

  .inner-wrapper {
    width: 100%;
  }

  .label {
    position: absolute;
    left: @input-inner-padding;
    color: rgba(0, 0, 0, 45%);
    font-size: var(--font-size-base);
    line-height: 1;
    pointer-events: all;
    display: flex;
    width: max-content;
    z-index: 5;

    &.isfoucs-has-value {
      top: 10px;
      transition: all 0.2s var(--seal-transition-func);
    }

    &.blur-no-value {
      top: 21px;
      transition: all 0.2s var(--seal-transition-func);
    }

    &.has-prefix {
      top: 10px !important;
    }
  }

  // ==================== select ==================

  :global(.ant-select) {
    display: flex;
    align-items: center;
    height: 54px;

    :global(.ant-select-selection-search) {
      top: 20px !important;
      inset-inline-start: @input-inner-padding;
    }
  }

  :global(.ant-select.ant-cascader .ant-select-selection-search) {
    top: 0 !important;
  }

  :global(.ant-input-number-input-wrap) {
    flex: 1;
  }

  :global(.ant-select-selector) {
    flex: 1;
    padding-inline: @input-inner-padding !important;
    border-width: var(--ant-line-width);
    border-style: var(--ant-line-type);
    border-color: var(--ant-color-border);
    border-radius: @borderRadius;
    height: 54px !important;
    padding-block: 20px 0 !important;
    box-shadow: none !important;

    &:hover {
      border-color: var(--ant-input-hover-border-color) !important;
      transition: all 0.2s ease;
    }

    &:focus-within {
      border-color: var(--ant-input-active-border-color) !important;
      outline: 0;
      background-color: var(--ant-input-active-bg);
    }
  }

  :global(.ant-select-multiple.ant-select-lg) {
    :global(.ant-select-selection-search) {
      margin-inline-start: 0 !important;
      left: 0 !important;
    }
  }

  :global(.ant-select-selection-item) {
    height: @inputheight !important;
    padding-block: 5px !important;
    line-height: 22px !important;
    padding-inline-end: 0 !important;
  }

  :global(.ant-select-auto-complete) :global(.ant-select-selector) {
    padding-inline: 0 !important;
    flex: 1;
  }

  :global(.ant-select-arrow) {
    top: 32px;
  }

  &.no-label {
    padding-block: 0;

    :global {
      .ant-select-arrow {
        top: 50%;
      }
    }

    :global(.ant-select-selector) {
      padding-block-start: 0 !important;
    }

    :global(.ant-select .ant-select-selection-search) {
      top: 10px !important;
    }
  }

  :global(
      .ant-select-outlined.ant-select-disabled:not(.ant-select-customize-input)
        .ant-select-selector
    ) {
    background-color: transparent;
  }

  :global(.ant-select-selection-search-input) {
    height: @inputheight !important;
  }

  // ==================== input ====================

  :global(.ant-input),
  :global(.ant-input-password) {
    // width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    border: none;
    box-shadow: none;
    padding-block: 5px;
    padding-inline: @input-inner-padding;
    height: @inputheight !important;
    background-color: @bgColor;
  }

  :global(.ant-input.seal-textarea) {
    // width: 100%;
    flex: 1;
  }

  :global(.ant-input-number) {
    position: static;
    display: flex;
    align-items: center;
    border: none;
    box-shadow: none;
    padding: 0;
    height: @inputheight !important;
    background-color: @bgColor;

    &:hover .ant-input-number-handler-wrap,
    &-focused .ant-input-number-handler-wrap {
      width: 34px !important;
    }

    &:hover {
      cursor: text;
    }
  }

  :global(.ant-input-number.ant-input-number-disabled) {
    &:hover {
      background-color: inherit;
    }
  }

  :global(.ant-input-outlined) {
    display: flex;
    align-items: center;
    border: none;
    box-shadow: none;
    padding-block: 5px;
    padding-inline: @input-inner-padding;
    height: @inputheight !important;
    background-color: transparent;

    &.seal-textarea {
      min-height: 100px !important;
    }
  }

  :global(.ant-input.ant-input-disabled) {
    background-color: transparent;
  }

  :global(input.ant-input-number-input) {
    flex: 1;
    height: @inputheight !important;
    padding-block: 5px;
    padding-inline: @input-inner-padding;
  }

  :global(.ant-input-group) {
    position: static;
  }

  :global(.ant-input-group-addon) {
    inset-inline-start: unset !important;
    border-radius: 0 @borderRadius @borderRadius 0;
    width: 30px;
    background-color: transparent;
    border: none;
  }

  :global(.ant-input-group-addon:hover) {
    background-color: transparent !important;
  }

  :global(.ant-input-group-wrapper-disabled .ant-input-group-addon) {
    background-color: transparent;
  }

  :global(.ant-input-group-wrapper-disabled .ant-input-group-addon:hover) {
    background-color: transparent !important;
  }

  :global(.ant-input-search-button) {
    position: absolute;
    top: -20px;
    right: 0;
    border-radius: 0 @borderRadius @borderRadius 0 !important;
    overflow: hidden;
    border: none;
    height: 52px;
    border-left: var(--ant-line-width) var(--ant-line-type)
      var(--ant-color-border);
  }

  :global(.ant-input-number-handler-wrap) {
    top: 0;
    height: @wrapheight - 2px;
  }
}
