.TheSearch {
  border-radius: 20px !important;

  &.noBorder {
    --n-border: none !important;
  }


  :global {
    .n-input-wrapper {
      padding-left: 12px;
      padding-right: 4px;
      height: 42px !important;
      --n-height: 42px !important;
    }

    .n-button {
      height: 34px;
      font-size: max(16px, 13Px) !important;
      font-weight: 500;
      width: auto;
      opacity: 0.7;
    }

    .n-input__placeholder {
      font-size: max(15px, 13Px);
    }
    .n-input__suffix .n-base-clear, .n-input__prefix .n-base-clear {
      margin-right: 4px;
    }
  }

  .active {
    display: none;
  }

  .active,
  .default {
    width: max(16px, 14Px);
    height: max(16px, 14Px);
  }

  &:global(.n-input--focus) {
    .active {
      display: block;
    }

    .default {
      display: none;
    }

    :global {
      .n-button {
        opacity: 1;
      }
    }
  }

  &:hover {
    :global {
      .n-button {
        opacity: 1;
      }
    }
  }
}